Un effet sympa, fait maison, sans librairie tiers. A connaitre !
Faut qu'ça glisse !
(oui... gif tout pas beau à changer...😅)
Pour faire un petit effet sympa au scroll, rien de tel qu'un effet parallax.
Pour coder ce petit effet sympa, il ne faut pas grand chose en fait !
Juste comprendre que nous allons faire bouger les éléments qui composent notre image en fonction du scroll, et ça , ça se récupère facilement avec javascript !
Il existe, comme toujours d'autres méthodes, librairies... pour avoir le même effet.
Je t'en présente une ici que je trouve rapide et simple à mettre en place.
LA solution ? non... mais une solution ! 😉
Pour comprendre, tout se joue dans le javascript :
La fonction "parallax" donne pour chaque "élémentHtml" (les para1, 2 et3) une vitesse de défilement en jouant sur sa position (style.backgroundPositionY) en écoutant le scroll de la fenêtre du navigateur.
Le diviseur "vit" permet d'avoir des vitesses différentes en fonction des éléments, d'où ce second argument dans la fonction. Si tous les éléments allaient à la même vitesse, nous aurions un effet au mieux de "position : fixed", au pire, aucun effet particulier au scroll.
La ligne 13, si elle est décommentée, permet de donner un effet d'agrandissement de l'élément au scroll.
Sympa ! A tester !
Le liens pour mes 3 images si tu souhaites tester avec : img1 / img2 / img3
Et comme toujours.... amuse-toi !
en argument, mets un chiffre entre 0 et 1, renversant non ?
remplace backgroundPositionY par backgroundPositionX
Et là, mets des chiffres positifs... et des négatifs ! et soudain, c'est le bor*€! 😅
C'est par le jeu qu'on apprend, sois curieux !
Super merci je cherchais un tuto pour faire justement cette effet 👌🏻👌🏻
Moi aussi, je le trouve très sympa !!!
J'adore cet effet !