Le parallaxe ou effet parallaxe

En anglais parallax ou parallax scrolling (défilement)

 

Je vais faire simple et éviter de rentrer dans des considérations trop techniques.

Le parallaxe donne une impression de mouvement voire de profondeur sur un site web lors du défilement de la page ou du déplacement de la souris ; il s’agit en fait de plusieurs images qui bougent à des vitesses différentes.
Il est très utilisé depuis quelques années sur les sites “one-page”

En utilisant des outils comme le CSS ou JavaScript et des images transparentes (.png ou .gif) il peut donner des effets très complexes et visuellement impressionnants comme ici

Dans l’exemple proposé en haut de page nous avons deux images qui ne défilent pas à la même vitesse, mais aussi un effet de zoom arrière sur l’image de fond et un déplacement de l’image de premier plan en fonction du mouvement de la souris.
Et oui c’est pas rien !

parallaxe WebCréaPrint

Image de fond

parallaxe WebCréaPrint

Image de premier plan

L’image de premier plan est une image .png obtenue à partir de l’image de fond avec le centre transparent.

Un autre exemple de parallaxe sur le site

Voila c’était mon premier article sur le parallaxe pour le Blog de WebCréaPrint
Je dois avouer ne pas avoir autant de temps que souhaité à accorder à cette rubrique, mais petit à petit…