Я хочу, чтобы звездочки мигали с разной амплитудой. На пару секунд включается гифка, а потом назад статичное изображение. Прикрепляю ссылку на пример.
https://codepen.io/misha-web00/pen/ZERedBb
(подождите пару секунд, пока картинки с имгура в кеш не сохранятся)
Проблема в том, что когда одна звездочка, то всё нормально, но если их 2 и больше, то они начинают конфликтовать и "перебивать" анимацию друг друга. Почему это происходит, если я везде использую только this, который должен брать заложеную в клас переменную?
Уверен, я не учел какуе-то очевидную вещь, но не могу понять что именно :(
Снизу прикрепляю сам код
//STAR FUNCTIONs
//рандомне число
function getRandomInt(max) {
return Math.trunc(Math.random() * max);
}
//схема така: ми включаєм гіфку, а потім на рандомну кількість секунд вимикаємо гіфку.
class star{
//e = elm
constructor(e){
this.e = e;
}
star_light_method(){
setTimeout(() => {
this.e.src = 'https://i.imgur.com/yaqgXRr.gif';
setTimeout(() => {
//gif анімація триває приблизно 2,5s
this.e.src = 'https://i.imgur.com/eBFYlUI.png';
this.star_light_method();
},2490)
}, getRandomInt(5000))
}
}
function star_light_start_func(){
//спочатку запишемо усі картинки в массив.
star_element_container = document.querySelectorAll('.star');
star_container = [];
i = 0;
for (let elm of star_element_container){
//присвоїмо їм клас і зразу запустимо метод, який потім буде сам себе запускати.
star_container[i] = new star(elm);
star_container[i].star_light_method();
i += 1;
}
}
star_light_start_func();
.img_star{
height:90px;
width:90px;
}
body{
background-color:rgba(0,0,0,1);
}
<img class="img_star star" src="https://https://i.imgur.com/eBFYlUI.png">
<img class="img_star star" src="https://https://i.imgur.com/eBFYlUI.png">
<img class="img_star star" src="https://https://i.imgur.com/eBFYlUI.png">