Chargement...
Allez viens, on est bien !
Inscription / Connexion :
Google
Nouveaux Populaires Likes Favoris
plus
Tous les groupes Créer un groupe



"" 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)

})
Connectez-vous ou ouvrez un compte pour poster un commentaire.
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 ?
@rekted: changement de largeur d'opacité et de couleur
Ensuite tes boucles sont dégeulasses et incompréhensibles, utilise un querySelectorAll pour obtenir un itérable de DomNode
@Hqro:
Merci pour tes conseils je vais voir ça !
@lestercoraire: 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
@Hqro: 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.
@Pouki: le problème c'est pas le JS, c'est les gens qui développent comme lui



A Voir
Chargement...
Chargement...
Chargement...