En direct du Net

Scroll et parallaxe

13 mars 2012 | Laure Edubois | Aucun commentaire Graphisme

Scroll et parallaxe

Scrollin’ stones

Le scroll, de l’anglais “rouleau (de parchemin)” ou “manuscrit”, désigne l’action de faire défiler une page sur internet. Il s’agit d’un des principaux contrôles dont dispose l’utilisateur pour naviguer sur un site web, l’autre étant le clic. Ces deux moyens de navigation font d’ailleurs l’objet d’un débat : vaut-il mieux privilégier un contenu découpé en plusieurs pages (ce qui implique plusieurs clics pour l’utilisateur pour parcourir le contenu), ou organiser ce même contenu sur une seule page (et veiller à une bonne hiérarchisation des différentes parties) ? Des enquêtes auprès des utilisateurs ont démontré que le scroll était une pratique désormais bien assimilée, qui ne gênait en rien leur navigation. Trop de clics en revanche interrompt le flux du contenu et ce dernier devient semble-t-il plus difficile à suivre. Pour l’utilisateur, changer de page signifie passer à autre chose en rompant une continuité. Le scroll a donc l’avantage de conserver une dynamique de lecture pour l’utilisateur.

Parallaxe

Depuis quelques temps, on assiste à une remise à la mode du scroll qui se voit doté d’une nouvelle dimension : l’effet de parallaxe. Il s’agit d’une illusion d’optique qui s’inspire d’une des règles de perspective élémentaire : par rapport à un observateur, plus un objet est éloigné, plus celui-ci est petit et moins il se déplace vite. Un exemple classique : à bord d’un train, un passager regardant par la fenêtre voit les arbres les plus proches se déplacer plus rapidement que ceux au loin. La parallaxe consiste donc à animer des éléments à des vitesses différentes afin de suggérer plusieurs plans en mouvement. Auparavant surtout utilisée avec la technologie Flash, la parallaxe peut se reproduire également avec un peu de JavaScript, JQuery simplifiant beaucoup de choses.

Nike Better World Manufacture d'essai The Chris BoxQuelques jolis exemples, cliquez sur les vignettes pour accéder aux sites

En pratique

On part d’une page dotée de plusieurs arrière-plans, et des blocs de contenu. Chacun des arrière-plans se voit attribué une valeur différente en x ou en y (selon la direction de déplacement voulu). Vous assignez ensuite une vitesse à chacun de vos arrière-plans via JQuery, qui se charge de coordonner leurs déplacements lors du scroll. Un très bon tutoriel est disponible sur le site d’Alsacréations, pour ceux désirant mettre les mains dans le cambouis ! ça se passe ici : http://www.alsacreations.com/tuto/lire/1417-zoom-sur-effet-parallaxe.html

Les points négatifs : l’accessibilité n’est pas privilégiée, l’emploi d’images très lourdes plombe le temps de chargement de la page, et l’ergonomie peut faire débat comme évoqué plus haut.

Janploch This man's life
Un clic sur les vignettes pour visiter !

Mais à l’heure où les effets 3d côté visiteur reviennent en force, une page en parallaxe a l’avantage de renouveler l’expérience utilisateur, et apporter un aspect ludique à la navigation en plus d’être très tendance !

Popularité de l'article : 8%

Laisser un commentaire

Flux RSS - Suivre Les Nouveaux Médias
Recevez les news par mail !

Édito

Les Nouveaux Médias est un blog communautaire qui s'intéresse aux évolutions du secteur des Nouveaux Médias (Internet, Mobiles,...) tant au niveau marketing que technique.

Notre Communauté "virtuelle" est ouverte à tous les acteurs des Nouveaux Médias (professionnels, amateurs,...).

Nous vous invitons à apporter votre contribution en rédigeant un article ou en laissant votre commentaire.

Les derniers commentaires