Olá, no meu projeto tenho uma animação em Javascript com o scroll da pagina, que adiciona a classe Animate, assim que me aproximo do elemento, porém só alguns elementos da pagina estão funcionando perfeitamente, outros elementos estão adicionando essa classe assim que a página é carregada, sem eu nem estar perto do item, e mesmo quando me afasto do elemento a classe não é removida o que deveria acontecer.
html:
<div data-anime="left"></div>
Css:
[data-anime] {
opacity: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
[data-anime = "left"] {
transform: translate3d(-50px, 0, 0);
}
[data-anime].animate {
opacity: 1;
transform: translate3d(0, 0, 0);
}
Javascript:
const debounce = function(func, wait, immediate) {
let timeout;
return function(...args) {
const context = this;
const later = function () {
timeout = null;
if (!immediate) func.apply(context, args);
};
const callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
};
const target = document.querySelectorAll('[data-anime]');
const animationClass = 'animate';
function animeScroll() {
const windowTop = window.pageYOffset + ((window.innerHeight * 3) / 4);
target.forEach(function(element) {
if((windowTop) > element.offsetTop) {
element.classList.add(animationClass);
} else {
element.classList.remove(animationClass);
}
})
}
animeScroll();
if(target.length) {
window.addEventListener('scroll', debounce(function() {
animeScroll();
}, 200));
}