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.