Ce tutoriel a pour but de vous expliquer comment ajouter simplement un effet de parallaxe à votre page.

L'effet de parallaxe, pour les pages web, est obtenu quand un élément bouge à l'inverse du défilement de la page : lorsque vous descendez avec l’ascenseur sur la page, un des éléments, souvent en fond, remonte, donnant ainsi plus d'ampleur visuelle à la page.

Par extension, il est possible de gérer assez facilement l'apparition, la disparition, d'objets lorsque l'utilisateur fait défiler la page à l'écran. Nous allons voir comment implémenter simplement un effet de parallaxe à l'aide de fonctions javascript/jQuery sur une page, pour un projet Open Element.

Ce premier didacticiel tout simple sera suivi par un autre, abordant la gestion des objets pour créer une page encore plus dynamique.



Nous gérons ici dynamiquement le déplacement de l'image de fond colorée, le déplacement du titre et l'apparition, plus bas, au scrolling, d'une citrouille noire.

L'exemple est visible ici :

Tutoriel disponible ici :


(en cours d'édition, merci ).