Гирлянды на JS

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

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

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

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

Рисунок 4. Красный Пример гирлянды:

<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>

<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

Случайные уроки по этой теме:

Условные операторы в JavaScript Таймер. setTimeout и setInterval jQuery. Динамическая загрузка контента - Ajax Новогодние снежинки на JS Вывод JS массива как в PHP. print_r