Enfant, nous avons souvent posé notre regard contre la vitre pour observer, lors de longs voyages en voiture, le paysage qui défilait sous nos yeux. Au premier plan, les panneaux de signalisation passaient très vite. Plus loin, nous avions le temps de voir les vaches dans les prés, qui défilaient alors moins rapidement. Encore plus loin, les collines ne quittaient notre champ de vision que bien plus tard.
Cette profondeur de champ donne à chaque plan une vitesse de déplacement qui lui est propre du point de vue de l’observateur.
Cet effet est ce que l’on nomme la parallaxe.
On retrouve d’ailleurs ce terme, apparu au XVIe siècle, dans différents domaines comme la psychologie, la métrologie, l’astronomie ou la photographie.
Lien Wikipédia : La parallaxe
Revenons-en au visuel et notons au passage que c’est aussi cette danse des plans qui participe à donner toute la profondeur à la scène évoquée plus haut.
Inversement, on peut mettre en scène une parallaxe pour recréer un effet de 3D.
Dans le contexte d’une page web, le mouvement correspond alors au déplacement du regard sur le plan donné par celui de la souris ou du défilement de la page.
Quelques explications sur cet effet :
Scène d’ensemble
Scène d’ensemble décomposée en 3 plans
Dans cet exemple, nous pourrions imaginer qu’au survol de la souris vers la gauche, les 3 plans se déplaceraient vers la droite, chacun à une vitesse qui lui serait propre. Plus le plan est éloigné, plus lente sera sa vitesse.
Voici quelques exemples de sites ayant mis en avant cet effet de parallaxe :
Nike Better World — ancien exemple de site utilisant la parallaxe.
(Effet activé au scroll)
Digitalhands
Digitalhands — ancien exemple de site utilisant la parallaxe.
(Effet activé au mouvement de la souris)
Iutopi
(Effet activé au scroll)
Initialement, cet effet a été créé en Flash. Mais peu à peu, nous avons vu fleurir des sites utilisant les technologies CSS et JavaScript pour y parvenir.
Heureusement, des scripts JS ont donc fait leur apparition pour, une fois de plus, soulager le travail des développeurs.
En premier lieu, je citerai jParallax, qui me semble le plus simple à utiliser et qui se base sur le framework jQuery :
Son implémentation est extrêmement aisée car chaque plan est placé dans une balise <li>. En reprenant le schéma de tout à l’heure, nous aurions donc :
- Plan 1
- Plan 2
- Plan 3
Toujours du côté des scripts, nous pouvons également citer jQuery Parallax.
Enfin, pour celles et ceux qui souhaitent développer eux-mêmes cet effet, Grafikart propose un tutoriel consacré à la création d’un effet de parallaxe en JavaScript au défilement de la page.
Tutoriel : tutoriel Grafikart sur l’effet de parallaxe au défilement
Auteur : Grégory Toucas