Гирлянда на JS и CSS

Приветствую всех гостей нашего портала. Копался в поисках новогодних украшений для сайта, нашёл гирлянду для сайта. Гирлянда работает при помощи CSS и JS. И так для начала размещаем HTML код в нужном месте сайта.

HTML

<div id="garland">
<img src="/uploads/web/1.png">
<img src="/uploads/web/2.png">
<img src="/uploads/web/3.png">
</div>

Далее добавляем оформление.

CSS

<style>
#garland {
position: relative; 
background: url(https://lenger.kz/uploads/web/girland.png);
background-color: #000;
background-size: 100%;
width: 500px;
height: 250px;
}

#garland img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
transition: opacity 1s;
}
</style>

Заключительная фаза скрипт.

<script>
setInterval(function () {
var imagesArray = [].slice.call(document.querySelectorAll("#garland img"));
imagesArray.forEach(function (img) {
img.style.opacity = Number(Math.random() > 0.5);
});
}, 1000);
</script>

Вы можете на своё усмотрение менять те или иные параметры под ваши нужды.

Всех с наступающими зимними праздниками!!!