Гирлянды на JS

Создавать красивые вещи всегда приятно. В этом уроке будем делать гирлянду путём плавной смены изображений. Скрывать будем с помощью CSS: opacity: 0 или 1; //прозрачность (от нуля - невидим, до 1 - полностью видимый элемент) transition: opacity 3s; //плавный переход между состояниями opacity (3 секунды на переход) Для начала - создадим изображения гирлянд в 3-х стадиях и основное изображение гирлядны(гирлянду нашел в интернете). У меня получилось так:


Рисунок 1. Гирлянда


Рисунок 2.Синий


Рисунок 3. Желтый


Рисунок 4. Красный
Пример гирлянды:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style>
#garland {
   position: relative;
   background: url(/images/news/106--17-10-24--22-51-24--9t.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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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>
 
<div id="garland">
    <img src="/images/news/106--17-10-24--22-51-35--on.png" />
    <img src="/images/news/106--17-10-24--22-51-32--it.png" />
    <img src="/images/news/106--17-10-24--22-51-28--35.png" />
</div>
Рабочий пример:
Спасибо за внимание.
Если статья Вам показалась незаконченной или Вы знаете как её улучшить, пожалуйста сообщите мне e@gohtml.ru