04 91 47 57 06

14 Mai 2014

La mode des sites en parallax scrolling. Définition, avantages et inconvénients...

Connaissez-vous le parallax scrolling ? Si vous n’avez pas eu la chance de posséder une console 8-bits (Super Nintendo !) alors il y a peu de chances pour que vous connaissiez cette technique graphique permettant de donner une illusion de profondeur de champ.

Vous vous demandez certainement pourquoi nous abordons ce thème ? Et bien parce que cette technique est remise au goût du jour sur bon nombre de mini-sites !

 

Définition

Pour les plus curieux d'entres vous, sachez qu'il s'agit ici d'un terme générique correspondant au déplacement de plusieurs éléments sur des couches et à des vitesses différentes. Au scroll (défilement de la vue) ou en fonction des coordonnées de la souris, les positions des différents fonds (ou éléments à animer) vont changer, ce qui va générer un effet de profondeur.


Mais plutôt qu'une longue définition voici tout simplement quelques exemples de sites en Parallax Scrolling :

- http://www.digitalhands.net/

- http://www.ds5.citroen.com/fr/

- http://www.ok-studios.de/home/

- http://benthebodyguard.com/

 

Une technique efficace...

L’intérêt de cette technique sera de donner une signature graphique particulière à un site pour que les visiteurs s’en souviennent. Utilisée de façon intelligente, le parallaxe scrolling permet de scénariser l’apparition d’éléments sur la page, lui conférant ainsi une cinématique sans pour autant avoir recours à Flash (on parle de Storytelling). Le site Ben the Bodyguard a ainsi été le premier à l’exploiter en le combinant à un défilement vertical, le tout dans un univers de BD.

Bon nombre de designers l'utilisent pour leur Portfolio et de grandes marques ce sont déjà laissées tenter (on pense notament à Nike, Smart ou encore Renault).

 

Des inconvénients cependant !

Même si il est de plus en plus utilisé, le parallax scrolling est encore loin de devenir la norme ! Pour commencer c'est une technique complexe à coder et pas forcément compatible avec tous les systèmes de gestion de contenu. D'autre part, cela rallonge le temps d'affichage de la page (comme il faut charger tous les éléments graphiques et contenus).
Des détails certes mais n'oublions pas le plus important: en adoptant un défilement horizontal, vous cassez le principe de navigation page à page et cela pourra en dérouter plus d'un ! N'oubliez donc pas de bien définir votre cible.


En conclusion, parfait pour se démarquer et apporter un style nouveau ainsi qu'une expérience visuelle mais à utiliser avec précaution tout de même !