Parallax scrolling


Le parallax scrolling permet à l’utilisateur de percevoir une impression de profondeur. Le site web apparaît comme une animation 3D qui se déroule en faisant défiler la page vers le bas. Ce concept opérationnel est particulièrement bien adapté au storytelling, la lecture des contenus étant encouragée par les effets de défilement, les animations et les affichages publicitaires. Le parallax scrolling se retrouve aussi dans le web design sous les termes de parallax website, scrolling website ou encore parallax web design.

Le terme parallax scrolling désigne des sites web dont le concept d’utilisation se distingue nettement des menus de navigation classiques : les sites web avec parallax scrolling se commandent via la fonction de défilement de la souris. Si l’utilisateur fait défiler le site, les éléments de ce dernier se déplacent à des rythmes différents. Une image de fond se déplace lentement, tandis que les images ou les éléments graphiques au premier plan bougent plus rapidement.

ParallaxScrolling de en fr.png

Informations générales

Le Parallax Scrolling fonctionne avec ce que l’on appelle le défilement parallaxe. Lorsqu’un observateur se déplace parallèlement vers deux objets, les objets lui semblent bouger à des vitesses différentes. L’objet se situant le plus près semble se déplacer plus rapidement, celui plus en retrait moins vite. Cet effet de psychologie de perception fait résulter chez l’observateur une impression de profondeur particulière, car les réflexions de lumière de l’objet près de lui sont perçues plus rapidement par la rétine. Le cerveau humain traite ces stimuli de façon à ce que l'espace représenté soit perçu comme s'il était en 3D.

L’impact du parallax scrolling est important dans la géométrie, l’astronomie, la photographie et en métrologie. Dans les jeux vidéo en 2D, le parallax est utilisée pour créer des profondeurs et pour donner une orientation au joueur. Depuis quelques années, l’effet du défilement parallaxe est également utilisé en web design. L’objectif consiste à améliorer l’enregistrement des informations présentées et de concevoir le site web de manière interactive. Les utilisateurs sont alors censés, sur la base de la présentation, se souvenir de la gamme d’informations et trouver la fonctionnalité du site web agréable (Joy of use).

Fonctionnalité

Le défilement parallaxe peut être créé de différentes manières sur les sites web. En général, les images de fond et les éléments visuels sont insérés au premier plan de telle manière que l’observateur puisse se déplacer à travers le paysage via la fonction de défilement. L’image globale ou la zone visible au-dessus du pli est le repère – aussi appelé viewport – pour l’observateur : le site web se déplace pour ainsi dire en partant de ce repère fixe, tandis que les éléments individuels se déplacent plus lentement et plus rapidement. Ces mouvements sont provoqués par des Slides, Fade out, Fade in et des éléments fixés comme du texte ou des graphiques chargés de manière continue via ce que l’on appelle les HTML Reflow. La disposition des éléments en partie animés sur le défilement parallaxe entraîne un affichage dynamique des contenus du site web : l’utilisateur « expérimente » les contenus car ces derniers se déplacent horizontalement.

Le site web en lui-même est, du point de vue de sa conception, souvent un site web Single Page ou OnePager : code source, textes, images, CSS et scripts se trouvent dans un seul et même document déposé sur un serveur. Les effets sont commandés via des sélecteurs et des tags CSS, les requêtes sont gérées par les effets, après avoir été déclenchés par l’utilisateur qui aura fait défiler la page. Dans le cas d’un usage de plusieurs scripts, de graphiques très détaillés, d’images à haute résolution ou à cause d’un rendering important, le temps de chargement des contenus peut être plus long que prévu. C’est pour cette raison qu’il est conseillé de n’utiliser les effets que de manière subtile et qu’il vaut toujours mieux choisir un code source léger. Idéalement, le défilement parallaxe fait partie du concept général du site web, pouvant également être un site web multi-page pour une utilisation ciblée.

Dans la pratique

Le cas d'utilisation le plus fréquent est celui du storytelling. Ici, les contenus sont arrangés de manière à raconter une histoire – pendant que l'utilisateur fait défiler la page vers le bas. L’éventail de renseignements et la représentation technique des contenus sont combinés. Les freelanceurs, sites web, boutiques en ligne, les pages de renvoi proposant beaucoup d’appels à l’action, les sites web de lancements de produits et de campagnes publicitaires profitent également des avantages du défilement parallaxe pour le storytelling.

Du point de vue du design web, les points suivants sont pertinents dans la représentation des informations à l’aide du défilement parallaxe[1] :

  • Le défilement parallaxe devrait être utilisé de manière minimaliste si on souhaite aller vers un flat design.
  • Il devrait faire fonction de storytelling visuel.
  • Il devrait susciter du plaisir chez l’utilisateur et aucune frustration.
  • Il devrait pousser l’utilisateur vers une action. Par exemple une prise de contact ou la commande d’un produit.
  • Il se doit d’être rétroactivement compatible avec d’anciennes versions de navigateurs et de fonctionner sans aucun problème sur les navigateurs mobiles.

Dans le cas où ces critères ne seraient pas respectés lors de la création d’un site web basé sur le défilement parallaxe, il est possible que l’utilisateur final se retrouve alors confronté à d’importants problèmes. Dans le pire des cas, le site web serait inutilisable, les informations impossibles à consulter, et le site n’atteint alors pas son objectif. Trop de difficultés techniques pourraient frustrer les utilisateurs et également porter atteinte à l’image du site.

Une complication supplémentaire réside dans le fait que différentes infrastructures et méthodes existent déjà pour la mise en place du défilement parallaxe. Par exemple :

  • JavaScript
  • HTML5 et CSS3
  • Plug-ins et modules spécifiques
  • jQuery

La meilleure stratégie aujourd'hui (août 2017) est certainement l’utilisation du HTML5 avec les effets CSS3 adéquats, ainsi que le moins de scripts possible.

Signification pour la programmation

Le défilement parallaxe a été acclamé à ses débuts et est devenu une tendance utilisée dans un grand nombre de projets à succès. Mais n’oublions pas que ces derniers étaient spécialement adaptés à ce type de technique. Celui qui considère le défilement parallaxe comme une fin en soi devrait certainement être conseillé pour utiliser éventuellement d’autres méthodes de web design. Le défilement parallaxe reste cependant particulièrement bien adapté comme moyen de storytelling lorsque l’objectif du site web est clairement défini et que l’implémentation du projet se fait dans les règles de l’art[2] .

Comme pour les sites web OnePager, les critères SEO et de performance sont à respecter scrupuleusement : seuls les facteurs OnPage des pages isolées peuvent être optimisées et la longueur des mots-clés est également limitée. Les liens internes ne sont que partiellement possibles, et tous les sites web au défilement parallaxe ne sont pas adaptatifs ni adaptés aux appareils mobiles. Certes, Google est à présent capable de gérer plus ou moins bien le code JavaScript mais le ratio texte-code ne risque pas d’être très élevé.

Références

  1. What Is Parallax Web Design? unleashed-technologies.com, ouvert le 30.08.2017
  2. How The Web Design Trend of Parallax Scrolling Has Faded designyourway.net, ouvert le 30.08.2017

Liens web