Есть сайт -
sniper24.beget.tech/ambassador
В оффере изначально существует 5 кругов, которые при скролле переходят на секцию ниже
Необходимо сделать плавное удаление и добавление класса с помощью скрипта.
Как можно это реализовать плавно или есть какая-то альтернатива?
Сам скрипт:
const benefitsScroll = () => {
window.addEventListener('scroll', () => {
let scrollDistance = window.scrollY;
document.querySelectorAll('.header, .offer, .benefits').forEach(item => {
if (item.offsetTop >= document.querySelector('.benefits').clientHeight <= scrollDistance) {
document.querySelectorAll('.benefits-item .benefits-item__image').forEach(item => {
if (item.classList.contains('benefits-item__image')) {
item.classList.remove('benefits-item__image--active');
}
});
} else if (item.offsetTop <= document.querySelector('.benefits').clientHeight <= scrollDistance) {
document.querySelectorAll('.benefits-item .benefits-item__image').forEach(item => {
if (item.classList.contains('benefits-item__image')) {
item.classList.add('benefits-item__image--active');
}
});
}
});
});
if (screen.width <= 760) {
document.querySelectorAll('.benefits-item__image--active').forEach(item => {
item.classList.remove('benefits-item__image--active');
});
}
};
benefitsScroll();
