Bien utiliser le parallax sur le web

Vous en avez sans doute déjà entendu parler mais peut-être le terme vous a semblé barbare. L'effet de parallax est de plus en plus utilisé en web design. Il consiste à déplacer à des vitesses différentes des éléments de la page lorsque l’utilisateur scroll. Cela créé ainsi une illusion de profondeur, donc de 3D. Cette technique n’est pas nouvelle, loin de là.

Le parallax, de 2011 à aujourd'hui

Maîtrisé et popularisé par le site Nike Better World dès janvier 2011, en raison de son caractère révolutionnaire pour l’époque, l'effet fut ensuite sur-utilisé et, surtout, mal utilisé. Certains designers et développeurs ont voulu tout animer, dans tous les sens, à tel point que les performances en termes de chargement et de fluidité en devenaient rédhibitoires. Or un site rapide à charger obtient les faveurs de Google pour le référencement. Ceci a mené à une prise de conscience collective. Certains sites n’ont tout simplement pas besoin de parallax. Quand vous faites un tour sur un site d’actualité, c’est bien pour avoir un aperçu rapide de l’information du jour, et non pour être ébahi devant des animations superflux. En revanche, utilisé avec intelligence sur des sites souhaitant offrir une expérience utilisateur mémorable, le parallax fonctionne toujours à merveille. Il permet de distinguer votre site de celui du concurrent et de le rendre identifiable au premier coup d’oeil.

En 2017, la situation a considérablement évoluée depuis l’apparition de l’effet en 2011. Nos navigateurs gèrent la plupart du CSS3 parfaitement et nos ordinateurs, tablettes et même smartphones intègrent une carte graphique à même d’afficher des animations complexes sans broncher. C’est ainsi que, tout naturellement, le parallax est revenu au tout premier plan. Même léger, celui-ci provoque la curiosité de l’utilisateur qui passe donc davantage de temps sur votre site. Voici quelques exemples de sites modernes l’utilisant.

Le site Amaio joue sur plusieurs plans se déplaçant verticalement. La superposition des textes, images mais aussi fonds en aplat donnent une intéressante sensation de profondeur.

Le site des vins Olivier Bernstein opte pour un scrolling horizontal et nous prouve que le parallaxe marche également parfaitement sur cette axe. Le mix entre petites images et images en plein écran est intelligent et insuffle du dynamisme.

Dans un style plus discret, le site de la marque Pomerlau utilise juste le bon dosage de parallax pour donner vie aux pages.

A l’inverse du site précédent, VP Brands crée vraiment le concept du site autour de l'effet de parallax. Cette approche donne une très forte identité visuelle.

Carbon Beauty est un site e-commerce dont la page d’accueil est reconnaissable au premier coup d’oeil. L’effet de profondeur sur trois plans en est la raison. Au scroll, le texte se déplace horizontalement et une partie du texte passe en effet sous la bannière tandis que l’autre passe par dessus. Originale et créatif.

Bien utiliser l’effet de parallax sur votre site

A l’heure actuelle, un nombre très conséquent de propriétés CSS peuvent être animées. Toutefois, vous ne souhaitez pas que votre site web ressemble à un feu d’artifices saccadé ! De l’avis de nombreux experts, voici les guidelines à respecter pour réaliser des sites animés tout en restant fluides (60 FPS - images par seconde).

• Animez uniquement quatre propriétés : translate3d, scale, rotate et opacity. Pourquoi translate3d et non pas translate me direz-vous ? Comme dit plus haut, nos appareils possèdent désormais tous une carte graphique. Lorsque vous utilisez translate3d, cela force le GPU (processeur graphique) à gérer les translations. Donc cela libère d’une tâche lourde le processeur principal déjà bien exploité. Petit conseil également : limitez les effets de scale (mise à l’échelle) et rotate (rotation) sur des visuels lourds si vous ne voulez pas avoir un site qui tourne au ralenti.
• Animez uniquement les éléments lorsqu’ils sont visibles à l’écran. Cela semble logique mais il est toujours bon de rappeler que les éléments non visibles à l’écran n’ont aucun intérêt pour l’utilisateur. Inutile donc de les animer lorsqu’ils sont en dehors du viewport.
• Utilisez RequestAnimationFrame pour optimiser la fluidité. Nos navigateurs effectuent un travail complexe : ils parcourent nos fichiers HTML et CSS, les interprètent puis peignent des pixels à l’écran. RequestAnimationFrame dit à votre navigateur qu’une animation sera à calculer au prochain “repaint” et optimise les performances. Contrairement à setInterval, le navigateur “refait la peinture” lorsqu’il est libre de le faire, il n’est pas surchargé par une boucle lui demandant de peindre de façon abusive et constante. Pour en savoir plus, voici un excellent article.
• N’animez pas tout sous prétexte que vous le pouvez ! Choisissez avec précaution les éléments que vous souhaitez animer et surtout, sachez vous modérer si la fluidité commence à pâtir.

Un exemple basique avec Skrollr

Il existe une grande variété de plugins permettant de gagner du temps pour réaliser des effets de parallaxe. Parallax.js et Skrollr sont parmi les plus connus et utilisés. Nous vous proposons un exemple avec Skrollr qui a l’avantage d’être en JavaScript pur et qui vous évite donc d’avoir à charger jQuery si vous n’en avez pas besoin autrement.

Pour initialiser Skrollr, rien de bien compliqué. Intégrez skrollr.min.js à la fin de votre page et utilisez cette courte ligne de code pour l'initialiser :

A partir de là, vous allez pouvoir créer des animations de la plus simple à la plus complexe en ajoutant un peu de code dans vos balises HTML. Là où Skrollr tire son épingle du jeu, c’est grâce à la possibilité de créer les animations par rapport au niveau de scroll de la page ou bien par rapport à la position des éléments dans le viewport (ce qui est visible à l’écran). Cette deuxième solution à l’avantage d’optimiser les performances puisque les éléments hors écran ne sont plus animés. Quelque soit la solution utilisée, vous devez toujours déclarer au moins un état de départ et un état d’arrivée (éventuellement des états intermédiaires si vous le souhaitez).

Voici un exemple simple, concret et résolument à la mode. L’image ci-dessous se déplace légèrement plus vite que le reste de la page, créant un effet de parallaxe. (effet visible en desktop uniquement)

Ici nous créons un bloc avec une certaine largeur mais surtout une hauteur limitée à 500px et un overflow hidden car nous ne voulons pas voir l’image contenue en entier. A l’intérieur de ce bloc se trouve une image qui doit impérativement être plus haute que votre bloc. Ici nous avons choisie une image de 700px. Comme notre bloc fait 500px de haut et notre image 700px de haut, nous allons pouvoir la déplacer de 200px sur l’axe Y (vertical). C’est ce que nous faisons en utilisant translate3D(0, -200px, 0).

Mais intéressons nous aussi à la syntaxe de Skrollr. Ici nous indiquons avec data-bottom-top l’état dans lequel doit se trouver l’image lorsque le haut de l’image atteint le bas de l’écran (autrement dit lorsqu’elle entre dans le viewport). Et avec data-top-bottom, nous lui précisons son état lorsque le bas de l’image atteint le haut de l’écran (autrement dit lorsqu’elle sort du viewport). Nous créons donc une animation qui se produira tant que l’image est à l’écran. Ce que Skrollr va faire, c’est interpoler la valeur entre 0px et 200px en fonction du scroll de l’utilisateur. Attention à bien préciser l’unité à chaque fois, Skrollr ne sait pas interpoler entre 0 et 200px ou entre 0px et 200. L’unité doit être indiquée au départ et à l’arrivée et elle doit être la même (de pixels à pixels ou de pourcents à pourcents).

Skrollr est très complet et vous laisse totalement libre. Ci-dessous voici un récap des syntaxes pour animer selon vos envies. Gardez celui-ci de côté, il vous servira plus d’une fois !

Sans entrer dans les détails, sachez que vous pouvez animer un élément en fonction du positionnement d’un autre élément grâce à l’attribut data-anchor-target. Voici un exemple.

Vous pouvez également ajouter/retirer des classes à vos balises en fonction du scroll de l’utilisateur. Par exemple :

La parallaxe est rarement une bonne idée sur mobile et nous vous conseillons donc de limiter Skrollr au desktop, voir tablette en fonction de la lisibilité de votre design (plus votre design est complexe, plus ajouter des animations sur un petit écran peut perdre l’internaute).

Conclusion

L’effet de parallax vous permet d’ajouter de l’animation à votre site et de lui donner une identité visuelle plus facilement mémorisable par les utilisateurs. A l’heure actuelle, il est aisé d’ajouter ces effets de profondeurs tout en gardant votre site fluide. La clé réside dans la façon d’utiliser l'effet. Ne surchargez pas vos sites inutilement et utilisez des propriétés CSS peu coûteuses à animer. Le résultat devrait faire son petit effet… de parallax !