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.

L’effet parallaxe 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 !

WebCréaPrint agence web à Villefranche de Rouergue

Image de fond

parallaxe WebCréaPrint

Image de premier plan

L’image de premier plan est une image .png  transparente.

Un autre exemple sur le site, en fait quasiment toutes nos pages utilisent le principe de parallaxe.
Un exemple qui fait peur, sur notre plan de 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…