Inicio
Celebración de Cumpleaños con Globos

Celebración de Cumpleaños con Globos

La plantilla 'Celebración de Cumpleaños con Globos' ofrece una forma alegre y dinámica de enviar felicitaciones. Presenta un mensaje prominente y personalizable de '¡Feliz Cumpleaños!' con una sutil animación de pulso. El fondo cobra vida con globos coloridos y animados que flotan hacia arriba y rebotan suavemente, creando una atmósfera vibrante y festiva. Los usuarios pueden modificar fácilmente el texto principal, ajustar el número de globos y seleccionar de una paleta predefinida o añadir sus propios colores directamente en el código JavaScript.

Previsualizar

Características de la plantilla

Globos flotantes animados usando HTML5 Canvas
Texto principal de cumpleaños personalizable
Número de globos ajustable
Colores de globos personalizables
Animación de pulso para el texto principal
Diseño responsivo que se adapta a diferentes tamaños de pantalla
Animación de fondo con globos a pantalla completa
Aspecto limpio, festivo y moderno con fondo degradado
Variables fáciles de modificar para personalizar (texto, cantidad de globos, colores)
Usa Tailwind CSS para estilos de utilidad (aunque los estilos principales son personalizados)

Tecnologías usadas

HTML5 CSS3 JavaScript Canvas API Tailwind CSS

Código de la Plantilla

 
                            
                                <!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- MODIFICAR: Título de la pestaña del navegador -->
    <title>¡Feliz Cumpleaños!</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="birthday-container">
        <!-- MODIFICAR: Texto principal del mensaje -->
        <h1 class="birthday-text">¡Feliz Cumpleaños!</h1>
    </div>
    <canvas id="balloonCanvas"></canvas>
    <script src="script.js"></script>
</body>
</html>
                            
                         
 
                            
                                body {
    font-family: 'Inter', sans-serif;
    overflow: hidden;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    /* MODIFICAR: Color de fondo de la página. */
    background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);
}

.birthday-container {
    text-align: center;
    z-index: 10;
    /* MODIFICAR: Color de fondo del recuadro del texto. */
    background-color: rgba(255, 255, 255, 0.8);
    padding: 40px 60px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.birthday-text {
    font-size: 4rem;
    font-weight: bold;
    /* MODIFICAR: Color del texto principal. */
    color: #e91e63;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
    /* MODIFICAR: Velocidad de la animación de pulso (ej: 2s = 2 segundos). */
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

@media (max-width: 768px) {
    .birthday-text { font-size: 3rem; }
    .birthday-container { padding: 30px 40px; }
}

@media (max-width: 480px) {
    .birthday-text { font-size: 2.2rem; }
    .birthday-container { padding: 20px 30px; }
}
                            
                         
 
                            
                                const canvas = document.getElementById('balloonCanvas');
const ctx = canvas.getContext('2d');

let balloons = [];
// MODIFICAR: Cantidad de globos que aparecen en pantalla.
const numBalloons = 30;

// MODIFICAR: Paleta de colores para los globos (puedes añadir o quitar colores).
const balloonColors = ['#ff69b4', '#ffc0cb', '#add8e6', '#90ee90', '#ffd700', '#ffa07a', '#dda0dd', '#87cefa'];

function resizeCanvas() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
}
window.addEventListener('resize', resizeCanvas);
resizeCanvas();

class Balloon {
    constructor(x, y, radius, color, dx, dy) {
        this.x = x;
        this.y = y;
        this.radius = radius;
        this.color = color;
        this.dx = dx;
        this.dy = dy;
    }

    draw() {
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
        ctx.fillStyle = this.color;
        ctx.fill();
        ctx.closePath();

        ctx.beginPath();
        ctx.moveTo(this.x, this.y + this.radius);
        ctx.lineTo(this.x, this.y + this.radius + this.radius * 1.5);
        // MODIFICAR: Color del hilo del globo.
        ctx.strokeStyle = '#555';
        // MODIFICAR: Grosor del hilo del globo.
        ctx.lineWidth = 2;
        ctx.stroke();
        ctx.closePath();
    }

    update() {
        this.x += this.dx;
        this.y -= this.dy;

        if (this.y + this.radius < 0) {
            this.y = canvas.height + this.radius;
            this.x = Math.random() * canvas.width;
            // MODIFICAR: Rango de velocidad de los globos cuando reaparecen.
            this.dx = (Math.random() - 0.5) * 2;
            this.dy = Math.random() * 2 + 1;
        }

        if (this.x + this.radius > canvas.width || this.x - this.radius < 0) {
            this.dx = -this.dx;
        }
        this.draw();
    }
}

function initBalloons() {
    balloons = [];
    for (let i = 0; i < numBalloons; i++) {
        // MODIFICAR: Rango de tamaño de los globos. '15' es el mínimo, '20' es el rango aleatorio.
        const radius = Math.random() * 20 + 15;
        const x = Math.random() * (canvas.width - radius * 2) + radius;
        const y = Math.random() * canvas.height + canvas.height;
        const color = balloonColors[Math.floor(Math.random() * balloonColors.length)];
        // MODIFICAR: Rango de velocidad inicial de los globos.
        const dx = (Math.random() - 0.5) * 2;
        const dy = Math.random() * 2 + 1;
        balloons.push(new Balloon(x, y, radius, color, dx, dy));
    }
}

function animate() {
    requestAnimationFrame(animate);
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    balloons.forEach(balloon => {
        balloon.update();
    });
}

initBalloons();
animate();

window.addEventListener('resize', () => {
    resizeCanvas();
    initBalloons();
});
                            
                         