На странице сайта есть блок с 6-ю кругами, скрипт переворачивающий их через 5 сек если на них не навели курсор.
Дело в том что они переворачиваются через 5 сек после загрузки страницы, а надо что бы скрипт отработал только когда до них долистали. Как это сделать? Если можно с примерами
const cards = document.querySelectorAll('.flip-card');
let timerId = setTimeout(() => {
cards.forEach(card => {
card.classList.add('flip-card_flipped');
card.removeEventListener('mouseover', flipped);
});
}, 5000);
function flipped() {
clearTimeout(timerId);
cards.forEach(card => {
card.classList.add('flip-card_flipped');
card.removeEventListener('mouseover', flipped);
});
}
cards.forEach(card => card.addEventListener('mouseover', flipped));