"/>

Créer un effet parallaxe grâce à jQuery

Comment créer un effet de parallaxe sur les éléments d’une page ?

Après avoir longtemps cherché une solution simple pour créer un effet parallaxe sur plusieurs éléments en simultané, j’avais finalement laissé tomber : créer un parallaxe « statique » est assez simple, par contre faire en sorte qu’au scroll chaque élément d’une page se déplace différement, c’est un peu plus compliqué..La plupart des solutions impliquent à la fois des tonnes de css, ou l’utilisation combinée du css et jquery mais de manière assez compliquée.

Finalement, j’ai trouvé sur codePen une fonction js assez simple à comprendre qui prend en paramètre un seul élément de la page, c’est l’attribut data-scroll-speed qu’on va ajouter sur nos élements.  Si vous avez une liste d’éléments sur la page, il suffit d’incrémenter chaque valeur : data-scroll-speed=1, data-scroll-speed=2 etc , et la fonction js fait le reste. Chaque élement va se déplacer au scroll en fonction de son data-scroll-speed !

Voici un exemple fait à la va vite pour tester cette fonction. J’ai mis le lien du codepen original dans le code.

See the Pen
Parallax objects jquery
by blindDev (@yuyazz)
on CodePen.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.