Á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.
INDICE
¡Feliz Navidad! ¿Quieres darle un toque festivo y programable a tu sitio web? Aprende a construir un árbol de Navidad interactivo y animado utilizando solo las bases del desarrollo web: HTML, CSS y JavaScript. Es un proyecto divertido, perfecto para principiantes y para mostrar tus habilidades de codificación durante las fiestas.
Árbol de navidad
Árbol de navidad
El primer paso es establecer la estructura fundamental de nuestro árbol. Usaremos un solo div con el ID arbol para contener todas las "hojas" generadas. El código es minimalista, ¡permitiendo que JavaScript haga la magia!
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ARBOL DE NAVIDAD HTML CSS JS | CODEA.APP</title>
</head>
<body>
<div id="arbol">*</div>
<h1>FELIZ NAVIDAD</h1>
<H2>Les desea la familia CODEA APP!!!</H2>
</body>
</html>
💻 Generando el Árbol con JavaScript
La lógica del árbol se gestiona completamente con JavaScript. Usamos bucles para construir una forma piramidal de asteriscos (*) y envolvemos cada uno en un span con la clase color, crucial para la animación.
El Secreto de la Forma Piramidal
La matriz rows = [10, 3] define dos secciones: 10 filas para el follaje principal y 3 filas para el tronco o la base inferior.
JavaScript
<script>
document.addEventListener("DOMContentLoaded",function(){
let hojas = ""
const rows = [10,3] // 10 filas para el arbol principal, 3 para la base
rows.forEach(row =>{
for(let i = 0; i < row; i++){
// 1 + i * 2 asegura que cada fila tenga 2 asteriscos más que la anterior (1, 3, 5, 7...)
hojas += '<span class="color">*</span>'.repeat(1 + i * 2)
hojas += '<br>'
}
})
arbol.innerHTML = hojas
// ... Código de animación (ver siguiente sección) ...
})
</script>
Punto clave: La expresión '<span class="color">*</span>'.repeat(1 + i * 2) es lo que crea la expansión triangular, aumentando el número de asteriscos impares en cada línea.
✨ Animación y Estilo con CSS
Aquí es donde nuestro árbol se ilumina, gracias a CSS y la propiedad @keyframes.
Estilos Base y Animación animarHojas
Definimos un fondo oscuro (black) para que el árbol destaque y centramos el contenido. La magia reside en la animación de las "luces" (.color).
CSS
<style>
body{
background: black;
}
#arbol{
text-align: center;
font-size: 30px; /* Para que los asteriscos sean más grandes */
}
/* Definición de la animación de las luces */
@keyframes animarHojas {
0%{ color: rgb(0, 123, 255);} /* Azul */
33%{ color: rgb(0, 255, 0);} /* Verde */
66%{ color: rgb(255, 0, 0);} /* Rojo */
10%{ color: rgb(238, 255, 0);} /* Amarillo/Dorado (Nota: el 10% debería ir al final o ser ajustado)*/
}
/* Estilo y animación para el mensaje de Feliz Navidad */
h1,h2{
color: yellow;
text-align: center;
animation: 1s animarHojas infinite; /* Reutilizamos la misma animación para el texto */
}
</style>
Retraso de Animación en JavaScript
Finalmente, usamos JavaScript para aplicar la animación a cada asterisco individualmente con un retraso (time), lo que produce un efecto de luces intermitentes y parpadeantes más orgánico:
JavaScript
// dentro del document.addEventListener...
// animacion
let animacion = document.querySelectorAll(".color")
animacion.forEach((hoja, i)=>{
let time = i/50 + .5
// Aplicamos la animación con un retraso basado en la posición 'i'
hoja.style.animation = `animarHojas ${time}s infinite`
})
📥 Código Completo
📥 Código Completo
Puedes ver el código completo de CODEA APP listo para ejecutar:
(Inserta aquí el código completo original)
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ARBOL DE NAVIDAD HTML CSS JS | CODEA.APP</title>
</head>
<body>
<div id="arbol">*</div>
<h1>FELIZ NAVIDAD</h1>
<H2>Les desea la familia CODEA APP!!!</H2>
<script>
document.addEventListener("DOMContentLoaded",function(){
let hojas = ""
const rows = [10,3]
rows.forEach(row =>{
for(let i = 0; i < row; i++){
hojas += '<span class="color">*</span>'.repeat(1 + i * 2)
hojas += '<br>'
}
})
arbol.innerHTML = hojas
// animacion
let animacion = document.querySelectorAll(".color")
animacion.forEach((hoja, i)=>{
let time = i/50 + .5
hoja.style.animation = `animarHojas ${time}s infinite`
})
})
</script>
<style>
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);}
10%{ color: rgb(238, 255, 0);}
}
h1,h2{
color: yellow;
text-align: center;
animation: 1s animarHojas infinite;
}
</style>
</body>
</html>
🎁 ¡Felices Fiestas de CODEA APP!
🎁 ¡Felices Fiestas de CODEA APP!
Este pequeño proyecto demuestra que no se necesita un framework complejo para crear efectos visuales atractivos. Con unas pocas líneas de HTML, CSS y JavaScript puro, puedes construir elementos dinámicos que celebran la temporada navideña.
¡La familia CODEA APP les desea una muy Feliz Navidad y un próspero Año Nuevo!
Vista Previa Interactiva (Demo)
Leido 10411 veces | 73 usuarios
Á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.
- [ Descargas: 480 ]
CÓDIGO FUENTE: USD 0.00
Conversar con J.Luis