22 octobre 2012 À surveiller

La parallaxe en design Web

Dans les dernières années, le phénomène de défilement en parallaxe (parallax scrolling) est utilisé sur des sites Web à grande échelle, autant à des visées marketing et publicitaire que pour des questions de beauté ou d'expérimentation. La tendance tire son origine d'un jeu d'arcade populaire de 1982, Moon Patrol. Dans ce jeu sur Atari, les différentes couches de l'image de fond se déplacent à des vitesses différentes, au fur et à mesure que le joueur avance sur le terrain.

Le principe naturel derrière cette technique est le suivant. Un objet se trouvant plus près du point de perception se déplacera plus rapidement qu'un objet se trouvant plus loin, lorsque le point de perception est mouvant. Observé depuis les débuts de l'astronomie, il s'agit d'un phénomène pouvant être expérimenté assez simplement : En voiture par exemple, les panneaux routiers défilent plus rapidement que le paysage lointain. 

Pour appliquer un effet similaire à une page Web, il est nécessaire pour le designer de concevoir une image de fond en plusieurs couches différentes. Prenons un exemple afin de mieux décortiquer le phénomène.

Le site Web des boissons Activate est un bel exemple de l'utilisation de la parallaxe. L'image d'arrière-plan est composée de plusieurs couches se déplaçant à différentes vitesses lorsque le défilement est actif. Les éléments en premier plan sont aussi animés avec des paramètres différents, comme c'est le cas par exemple des titres et de chacune des bouteilles. Certains détails peuvent être beaucoup plus subtils et une intégration aussi complète est très exigeante au point de vue du chargement de la page. Il existe plusieurs façons techniques de produire de tels effets afin de mieux contrôler cette utilisation de la bande passante.

L'utilisation de la parallaxe chez O2 Web est récente, mais nous découvrons chaque jour les vastes possibilités qu'offre cette technique. Parmi nos réalisations, nous avons fait preuve de créativité avec le site Web illustré du Bistro L'Atelier où des éléments visuels apparaissent et disparaissent au fur et à mesure que l'on navigue. Vous pouvez également voir les traits du décor en mouvement entre chaque page, sans que l'image d'arrière-plan ne bouge d'un poil.

Plus récemment, nous avons également travaillé sur le nouveau site Web du salon Expo Habitat de l'APCHQ et bien sûr, le site Web que vous consultez actuellement, O2Web.ca!

Pour en savoir plus sur la parallaxe et les possibilités offertes par cette nouvelle technique, voici quelques articles et sites Web à consulter:

Julien Coppola - «Qu'est-ce que le Parallax Scrolling dans le Web Design?»
Design Modo - «Parallax Scrolling and Its Usage in Web Design»
Onbile - «Parallax Scrolling definition»