villiwalla
@villiwalla
HTML-верстка

Как установить по очередный запуск функции на анимации элементов, при скроле документа?

На странице есть 2-ве секции которые содержат в себе от 5 до 6 элементов. При скроле страницы до секции с элементами, запускается функция с добавлением класса активного состояния (анимацией). Но сейчас, при прокрутке до 1-й секции сейчас запускается анимация сразу на 2-й секции и докрутив уже до второй секции анимация не запускается т.е функция уже проставила активный класс всем элементам ещё в тот момент когда запустилась на 1-й секции. Как можно организоваться нормальный порядок запуска анимации?
window.onscroll = function () {
    programmList('#standart');
    programmList('#addational');
};

function programmList(ind) {
    var section =  document.querySelector(ind);

    var toSection = section.getBoundingClientRect().top;

    if(window.pageYOffset >= (toSection + 200)) {
        var sectionItem = section.querySelectorAll('.programm__item');

        console.log('Start Animation ' + ind);

        var i = 0;
        var speed = 500;

        var activeItem = setInterval(function () {
            sectionItem[i].classList.add('programm__item_active');
            i++;
            if(i >= sectionItem.length) {
                clearInterval(activeItem);
            }
        }, speed)
    }
}
  • Вопрос задан
  • 91 просмотр
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы