Are you eager to add a festive touch to your website by creating a charming Christmas lights animation? Look no further, because here’s the perfect solution! With the magical combination of HTML, CSS, and JavaScript, you can illuminate your site with the holiday spirit in a unique and captivating way.
Dive into the festive world of web development and bring your page to life with bright, twinkling flashes that will capture the attention of your visitors. This project will not only allow you to decorate your site but also provide an opportunity to learn and experiment with the most popular web technologies.
Harnessing the power of HTML, you’ll create the basic structure of your page. Then, with CSS, you’ll breathe life into your Christmas lights, playing with colors, sizes, and animations to achieve the desired effect. Finally, with JavaScript, you’ll add interactivity and dynamism to your animation, allowing the lights to blink, change color, and respond to user actions.
Moreover, you can customize your animation to perfectly suit the design and style of your website. Surprise your visitors with a unique experience that conveys the joy and holiday spirit!
Feel free to explore different variations and enhancements to make your animation even more special. Let the magic of the season illuminate your website and delight your users!
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();
});