На странице есть 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)
}
}
<header>
// Первый экран и навигация
</header>
<section id="presentation" class="presentation">
<div id="presentation__slide" class="slide">
<ul class="slide__outer">
<li class="slide__item">
<img src="/image/slide/slide1.jpg" alt="" class="responsive-img">
</li>
<li class="slide__item">
<img src="/image/slide/slide2.jpg" alt="" class="responsive-img">
</li>
<li class="slide__item">
<img src="/image/slide/slide3.jpg" alt="" class="responsive-img">
</li>
<li class="slide__item">
<img src="/image/slide/slide4.jpg" alt="" class="responsive-img">
</li>
<li class="slide__item">
<img src="/image/slide/slide5.jpg" alt="" class="responsive-img">
</li>
<li class="slide__item">
<img src="/image/slide/slide6.jpg" alt="" class="responsive-img">
</li>
</ul>
</div>
<div class="presentation__content">
<p>Итальянское искусство во всей своей многогранности: чудная аура керамики, гастрономия и виноделие. Словно ожившие пейзажи художников эпохи Возрождения в уникальных ландшафтах Равенны, Римини, Болоньи.</p>
<p>Знакомство с мастерами гончарного искусства, их ремеслом. И, говорим по-итальянски! Возможность изучения итальянского языка в рамках эффективного курса обучения во время путешествия, результатом которого станет Ваше взаимопонимание и успешное общение с Италией, ее искусством, культурой и традициями.</p>
</div>
</section>
<section id="addational" class="programm__addational">
<h1 class="programm__headig text-center">Индивидуальныя программа:</h1>
<p class="programm__content">Каждая программа может быть изменена и осуществлена по требованиям участников с предварительным определением стоимости дополнительных мастер классов и экскурсий.</p>
<p class="programm__content">Организаторы готовы удовлетворить любые дополнительные желания к согласованной программе по просьбе участников перед поездкой и во время пребывания в Фаэнце.</p>
<p class="text-bold text-upper text-center">Предлагаются:</p>
<div class="programm__list">
<div class="programm__item">
<div class="programm__icon">
<object type="image/svg+xml" data="/image/svg/music_key_opt.svg"></object>
</div>
<div class="programm__title">Музыкальные мастер-классы</div>
</div>
<div class="programm__item">
<div class="programm__icon">
<object type="image/svg+xml" data="/image/svg/planeer_opt.svg"></object>
</div>
<div class="programm__title">Пленэр с художником Фатеевым</div>
</div>
<div class="programm__item">
<div class="programm__icon">
<object type="image/svg+xml" data="/image/svg/colessium_opt.svg"></object>
</div>
<div class="programm__title">Мастер-классы по истории, искусству и литературе Италии</div>
</div>
<div class="programm__item">
<div class="programm__icon">
<object type="image/svg+xml" data="/image/svg/pasta_opt.svg"></object>
</div>
<div class="programm__title">Дегустации местных продуктов, эногастрономические туры</div>
</div>
<div class="programm__item">
<div class="programm__icon">
<object type="image/svg+xml" data="/image/svg/pizza_opt.svg"></object>
</div>
<div class="programm__title">Италия в одной пицце в ресторане "O fiore mio"</div>
</div>
<div class="programm__item">
<div class="programm__icon">
<object type="image/svg+xml" data="/image/svg/chef_opt.svg"></object>
</div>
<div class="programm__title">Кулинарные мастер-классы «Руки в тесте»</div>
</div>
<div class="programm__item">
<div class="programm__icon">
<object type="image/svg+xml" data="/image/svg/way_opt.svg"></object>
</div>
<div class="programm__title">Экскурсии в другие итальянские города</div>
</div>
<div class="programm__item">
<div class="programm__icon">
<object data="/image/svg/bicycle_opt.svg" type="image/svg+xml"></object>
</div>
<div class="programm__title">Велосипедные туры</div>
</div>
<div class="programm__item">
<div class="programm__icon">
<object data="/image/svg/hot_spring_opt.svg" type="image/svg+xml"></object>
</div>
<div class="programm__title">Термальные однодневные процедуры</div>
</div>
</div>
<div class="programm__price programm__price_nomrg">
<div class="programm__cost">Создайте свою мечту</div>
<button class="programm__btn" data-type="constract">Создать свою программу</button>
<p><small>* Цена дополнительных экскурсий и мероприятий зависит от количества желающих и от выбранного типа транспорта.</small></p>
</div>
</section>
