Árbol de Navidad animado en JS HTML y CSS

Autor: J. Luis

#CSS #HTML #Javascript

En este post, te mostraré cómo desarrollar un árbol de Navidad interactivo usando HTML, CSS y JavaScript. El árbol será animado con colores vibrantes para simular un efecto de luces navideñas.

Árbol de Navidad animado en JS HTML y CSS

Suscríbete a nuestro canal en Youtube

Vamos a crear o mejor dicho programar un ejercicio práctico usando los tres lenguajes del lado del frontend para el desarrollo de páginas web.

HTML
CSS
JAVASCRIPT

La idea es crear un árbol de navidad titilante con cambio de tres colores, que tenga la forma triángular. ¿Por qué? pues porque simplemente se puede hacer y no pongamos límite a nuestra capacidad de crear cualquier cosa. Y pues usando Lenguajes también aplicamos y desarrollamos nuestra creatividad.

Estructura HTML

El primer paso es crear la estructura básica en HTML, donde definimos el árbol de Navidad (#arbol) como un contenedor de los elementos span que representarán las hojas del árbol. También agregamos un saludo navideño con el encabezado h1 y h2 para personalizar el mensaje.

<body>
    <div id="arbol">*</div>
    <h1>FELIZ NAVIDAD</h1>
    <H2>Les desea la familia Jluis Dev!!!</H2>
</body>

Generación del Árbol con JavaScript

Utilizamos JavaScript para generar dinámicamente las filas del árbol. Creamos un bucle que itera sobre las filas que componen el árbol, incrementando el número de elementos en cada fila para darle forma al árbol.

document.addEventListener("DOMContentLoaded", function(){
    let hojas = "";
    const rows = [10, 3]; // Definimos las filas del árbol (10 y 3 para un diseño simple)
    rows.forEach(row => {
        for (let i = 0; i < row; i++) {
            hojas += '<span class="color">*</span>'.repeat(1 + i * 2); // Añadimos estrellas para cada fila
            hojas += '<br>';
        }
    });
    arbol.innerHTML = hojas; // Insertamos el contenido en el contenedor del árbol

    // Animación de las hojas
    let animacion = document.querySelectorAll(".color");
    animacion.forEach((hoja, i) => {
        let time = i / 50 + .5;
        hoja.style.animation = `animarHojas ${time}s infinite`; // Asignamos la animación a cada hoja
    });
});

Estilos CSS y Animación

En el estilo CSS, establecemos el fondo negro para simular la noche, y centramos el árbol con un tamaño de fuente adecuado. Luego, usamos la propiedad @keyframes para crear la animación que cambia el color de las "hojas" del árbol, simulando luces intermitentes de Navidad.

body {
    background: black;
}

#arbol {
    text-align: center;
    font-size: 30px;
}

@keyframes animarHojas {
    0% { color: rgb(0, 123, 255); }
    33% { color: rgb(0, 255, 0); }
    66% { color: rgb(255, 0, 0); }
    100% { color: rgb(238, 255, 0); }
}

h1, h2 {
    color: yellow;
    text-align: center;
    animation: 1s animarHojas infinite;
}

Explicación de la Animación

La animación de las hojas del árbol (animarHojas) cambia su color entre varios tonos (azul, verde, rojo, amarillo) de forma cíclica, imitando el parpadeo de luces. Además, los textos de los encabezados (h1 y h2) tienen una animación de color que complementa el efecto festivo.

Resultado Final

Cuando ejecutes este código, verás un árbol de Navidad compuesto por estrellas (*) que cambian de color en un bucle continuo. Además, el mensaje "FELIZ NAVIDAD" y "Les desea la familia Jluis Dev!!!" se mostrarán con una animación en colores amarillos, creando un efecto visual atractivo y festivo.

Leido 9550 veces | 72 usuarios

Demo

Descarga del código fuente Javascript de Árbol de Navidad animado en JS HTML y CSS

Accede al código fuente esencial de nuestra aplicación en formato ZIP ó TXT. Ideal para desarrolladores que desean personalizar o integrar nuestra solución.