"" lag "" au scroll
Yo
Je suis en train de faire un site pour une sorte de médium un peu taré mais pas méchant pour un sou.
Je rencontre un problème au niveau de la conception de ce site,
j’ai des animations qui se lancent au scroll (en occurrence la couleur, l’opacité) le seul problème c’est que ça fait « « laguer » » le site au déroulement de la page
Je vous mets ci-dessous le js
window.addEventListener('scroll', function(e) {
if(window.scrollY < 400){
text.classList.remove("opacity")
}
if(window.scrollY > 400){
text.classList.add("opacity")
}
if(window.scrollY > 800){
content.classList.add("opacity")
}
if(window.scrollY > 1800){
for(let i = 0; i < 3; i++){
moreInfoImgAll[i].classList.add("visi")
}
}
if(window.scrollY < 1800){
for(let i = 0; i < 3; i++){
moreInfoImgAll[i].classList.remove("visi")
}
}
lastScroll = window.scrollY;
this.console.log(lastScroll)
})
Ton code pourrait être optimisé, notamment si chaque animation est un onetime
Déjà, a partir de 400, à chaque scroll tu trigger la première condition, pareil à 800, et pareil à 1800
Et tant que t'es sous 1800, la dernière est active à chaque fois
On peut en savoir plus sur l'effet voulu ?
Ensuite tes boucles sont dégeulasses et incompréhensibles, utilise un querySelectorAll pour obtenir un itérable de DomNode
Je te conseille aussi de te baser sur le scroll depuis un élément plutôt que depuis la fenêtre entière. C'est plus safe.
Pour finir le scroll c’est un événement assez violent. D’ailleurs tu dois le voir dans ton console.log. La valeur bouge très vite, tu devrais utiliser un debounce ou un throttle.
Déjà utilise contains pour vérifier si les classes sont présentes https://developer.mozilla.org/en-US/docs/Web/API/Element/classList. Ça évitera d’ajouter les classes plusieurs fois
je pense pas que ça change quoi que ce soit étant donné que add fait la verification avant.
A chaque fois que je vois du js j'ai envie de me passer les couilles dans une meuleuse pour tenter de passer un meilleur moment.
fun
actualites
musique
interessant
choc
neuronique