¿Estás ansioso por darle un toque festivo a tu sitio web creando una animación encantadora de luces navideñas? ¡No busques más, porque aquí tienes la solución perfecta! Con la combinación mágica de HTML, CSS y JavaScript, podrás iluminar tu sitio con el espíritu navideño de una manera única y cautivadora.
Sumérgete en el mundo festivo de la programación web y dale vida a tu página con destellos brillantes y parpadeantes que capturarán la atención de tus visitantes. Este proyecto te permitirá no solo decorar tu sitio, sino también aprender y experimentar con las tecnologías web más populares.
Con el poder de HTML, crearás la estructura base de tu página. Luego, con CSS, darás vida a tus luces navideñas, jugando con colores, tamaños y animaciones para lograr el efecto deseado. Finalmente, con JavaScript, añadirás interactividad y dinamismo a tu animación, permitiendo que las luces parpadeen, cambien de color y respondan a las acciones del usuario.
Además, puedes personalizar tu animación para que se adapte perfectamente al diseño y estilo de tu sitio web. ¡Sorprende a tus visitantes con una experiencia única que les transmita la alegría y el espíritu navideño!
No dudes en explorar diferentes variaciones y mejoras para hacer que tu animación sea aún más especial. ¡Que la magia de la temporada ilumine tu sitio web y deleite a tus usuarios!
HTML
<div id="lights-container">
<div class="light red"></div>
<div class="light yellow"></div>
<div class="light green"></div>
<div class="light blue"></div>
<div class="light magen"></div>
<div class="light red"></div>
<div class="light yellow"></div>
<div class="light green"></div>
<div class="light blue"></div>
<div class="light magen"></div>
<div class="light red"></div>
<div class="light yellow"></div>
<div class="light green"></div>
<div class="light blue"></div>
<div class="light magen"></div>
<div class="light red"></div>
<div class="light yellow"></div>
<div class="light green"></div>
<div class="light blue"></div>
<div class="light magen"></div>
</div>
CSS
#lights-container {display: flex;justify-content: space-around;height: 62px;align-items: flex-start;position: fixed;width: 100%;top: 0;left: 0;background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3CY-KWfJdeZFbrXUDv-II1qVRRHoc-013B_JbwyZesvI26x51gD0esGzi5l9szk382PtEf06Ya_oDMpB1vpAlCRHPwQHDXgCee3zNnZl36DT5GTwlottKUI7KM18fUvgqeAlbjPtUlrJxp1G405g05e1pisC-YJuzIo3EmZmY-BkEou0uauQ-d7OvoN8/s1440/bg.png');background-size: 100% 100%;background-repeat: no-repeat;}
#lights-container .light {position: relative;width: 8px!important;height: 20px;border-radius: 50%;margin: 10px;background: #3333331a;}
#lights-container .light:nth-child(even){align-self: flex-end;}
#lights-container .light::before,
#lights-container .light::after {content: ""; position: absolute; width: 10px; height: 10px; border-radius: 50%; background: linear-gradient(90deg, #c0c0c0, #e0e0e0); }
#lights-container .light::before {top: -6px; left: 50%; transform: translateX(-50%); opacity: 1; border-radius: 4px 4px 0 0; }
#lights-container .light::after {top: 12%;left: 0;transform: translateY(-50%);width: 100%;border-radius: 7px 7px 0 0;height: 8px;opacity: 1;}
#lights-container .light.red.on{box-shadow: 0 4px 13px #ff0000;background-color: #ff0000;}
#lights-container .light.yellow.on{box-shadow: 0 4px 13px #ffff00;background-color: #ffff00;}
#lights-container .light.green.on{box-shadow: 0 4px 13px #00ff00;background-color: #00ff00;}
#lights-container .light.blue.on{box-shadow: 0 4px 13px #0000ff;background-color: #0000ff;}
#lights-container .light.magen.on{box-shadow: 0 4px 13px #F04DA1;background-color: #F04DA1;}
JS
$(document).ready(function() {
let currentInterval;
function animation_01(){
const colors = ['red', 'yellow', 'green', 'blue', 'magen'];
let currentIndex = 0;
if (currentInterval) {
clearInterval(currentInterval);
}
currentInterval = setInterval(() => {
$('.light').removeClass('on');
$('.light.' + colors[currentIndex]).addClass('on');
currentIndex = (currentIndex + 1) % colors.length;
}, 200);
}
function animation_02(){
clearInterval(currentInterval);
currentInterval = setInterval(() => {
$('.light').removeClass('on');
const currentSecond = new Date().getSeconds();
const isCurrentSecondEven = currentSecond % 2 === 0;
if(isCurrentSecondEven){
$('.light:nth-child(even)').addClass('on');
} else {
$('.light:nth-child(odd)').addClass('on');
}
}, 1000);
}
function animation_03(){
clearInterval(currentInterval);
const colors = ['red', 'yellow', 'green', 'blue', 'magen'];
let currentIndex = 0;
currentInterval = setInterval(() => {
$('.light').removeClass('on');
$('.light.' + colors[currentIndex]).addClass('on');
$('.light.' + colors[currentIndex+1]).addClass('on');
currentIndex = (currentIndex + 1) % colors.length;
}, 200);
}
let currentAnimation = 1;
setInterval(() => {
if (currentAnimation === 1) {
animation_02();
currentAnimation = 2;
} else if(currentAnimation === 2) {
animation_03();
currentAnimation = 3;
}else{
animation_01();
currentAnimation = 1;
}
}, 10000);
animation_01();
});