25 diciembre, 2024
Árbol de Navidad animado en JS HTML y CSS
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.

Suscríbete a nuestro canal en Youtube
SuscríbirseVamos 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.
Opciones de descarga
- Usuarios Registrados: Inicia sesión para descarga inmediata.
- Nuevos Usuarios: Regístrate y descarga.