RAX7, извените меня, я не совсем то имел веду, У меня свг с кодом в роли backgrounda а сверху наложен блок с блоками и при прохождении анимации при скроле поочереднопо змейке на каждый блок должен навешиваться класс с анимацией и кружок перерисовываться в галочку. Как на картинке.
Вот пример html кода который накладывается сверху на змейку.
RAX7, Вы гений, только вот пришлось переделать svg(((
Как можно реализовать этот способ с добавлением класса только до класса active
например .blok .blok .blok .blok .blok как только встречаем .blok.active перестаем раздавать класс.
Только в реализации с данным скриптом что ниже.
onScroll: function onScroll() {
s.scrollPosition = $(document).scrollTop();
ProgressScroll.requestTick();
var scrollPercentage = (document.documentElement.scrollTop + document.body.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);
var persent = parseInt(scrollPercentage * 100);
var currentItemIndex = elementAtPersent(persent, mapItemsPersent);
if (currentItemIndex !== -1) {
mapItemsPersent[currentItemIndex].targetEl.classList.add('current');
mapItemsPersent[currentItemIndex].targetEl.classList.remove('previous');
for (var i = currentItemIndex - 1; i >= 0; i--) {
mapItemsPersent[i].targetEl.classList.add('previous');
mapItemsPersent[i].targetEl.classList.remove('current');
}
for (var _i = currentItemIndex + 1; _i < mapItemsPersent.length; _i++) {
mapItemsPersent[_i].targetEl.classList.remove('current');
}
}
},
Вот ваш код как в вашем примере залитом на jsfibble,
как возможно его реализовать до то того момента пока не встретиться класс active
тоесть как встретим класс active перестаем раздовать классы.
Средний
