Comment ajouter l'effet scrolling parallax sur son site web ? (+ exemples)

L'effet parallaxe est devenu un outil puissant dans le design web et le marketing digital. Il offre une illusion de profondeur, améliore l'engagement des utilisateurs et rend le parcours de navigation plus immersif. Cet article explore son utilisation efficace dans divers sites web, et guide à travers le processus de sa mise en œuvre via HTML, CSS et les systèmes de gestion de contenu (CMS).

A quoi sert l'effet parallax ?

Définition et origine de l'effet parallaxe

L'effet parallaxe, qui tire son nom du terme grec parallaxis, signifiant « changement », est une technique de déplacement d'arrière-plan qui crée une illusion de profondeur et une expérience tridimensionnelle pour l'utilisateur. Cette technique, qui trouve son origine dans les jeux vidéo des années 1980, a été intégrée dans le design web pour améliorer l'expérience utilisateur (ou UX). L'effet est produit lorsque le fond d'une page web se déplace à une vitesse différente de celle du reste du contenu pendant le défilement.

Avantages de l'effet parallaxe pour l'engagement utilisateur

L'effet parallaxe contribue à une plus grande immersion du visiteur dans le contenu d'un site web. À ce titre, il se conforme aux différentes lois UX, ces principes à la base de l'optimisation du design. La narration visuelle crée une expérience utilisateur plus profonde, favorisant ainsi un meilleur engagement. Cette technique augmente le temps passé sur le site, car son aspect ludique et interactif suscite la curiosité et incite à explorer davantage la page. L'effet parallaxe met en valeur certains éléments spécifiques du contenu et facilite l'accentuation des points clés du message.

Utilisations de l'effet parallaxe dans le marketing

Dans le domaine du marketing, l'effet parallaxe offre des opportunités pour présenter les produits ou les services d'une manière dynamique et attrayante. Les marques exploitent cette technique pour créer des histoires visuelles captivantes autour de leurs produits, ce qui facilite la mémorisation du message de la marque. À travers ce design émotionnel, elles guident, avec fluidité, les utilisateurs à travers les différentes sections d'un site web, ce qui favorise l'appel à l'action et peut conduire à une augmentation du taux de conversion.

3 exemples de parallax scrolling efficace

Voici 3 exemples d'un benchmark UX pour illustrer concrètement l'application du parallax scrolling.

Le parallax scrolling de PORSCHEvolution

Le site web PORSCHEvolution offre un excellent exemple de parallax scrolling. Développé par le designer UX Ondrej Homola, ce site illustre l'évolution des modèles de voitures Porsche, depuis le Type 64 Racing Coupé des années 1930 jusqu'à la 911 de 2021.

Grâce à l'utilisation efficace du parallax scrolling, chaque modèle de voiture apparaît de manière fluide et linéaire, ce qui donne aux visiteurs l'impression de voyager dans le temps. Le défilement est parfaitement synchronisé avec une bande sonore adaptée à chaque décennie, ce qui crée une expérience utilisateur immersive. Le site web PORSCHEvolution démontre la valeur ajoutée du défilement parallaxe pour raconter une histoire avec engagement et interaction.

Le défilement parallaxe du site The Story of The Goonies

The Story of The Goonies, développé par Joseph Berry avec WebFlow, constitue un autre exemple de parallax scrolling. Il s'agit d'un site dédié au film d'aventure pour adolescents des années 80, Les Goonies.

Ce site recourt au défilement parallaxe de manière innovante pour capturer l'attention des utilisateurs, en les entraînant dans l'histoire, en introduisant les personnages et en révélant des détails sur le film. La page d'accueil donne l'impression d'un voyage le long de la côte rocheuse de l'Oregon, où se déroule le film, grâce à une application adroite du parallax scrolling. En ajustant différentes vitesses pour les images de premier plan et d'arrière-plan et en utilisant un agrandissement léger, l'effet 3D attire immédiatement l'attention.

En plus de l'intrigue du film, d'autres informations telles que le nom du réalisateur, la date de sortie, les profils des personnages, sont présentées de manière immersive. L'utilisation de l'audio ajoute une dimension supplémentaire à cette expérience de narration.

Un site de mariage dynamique

Le site de mariage des créateurs Russ Maschmeyer et Jessica Hische démontre l'efficacité du parallax scrolling pour raconter une histoire. Cet exemple illustre parfaitement comment une histoire linéaire (ici celle de leur relation) peut être racontée de manière puissante, en ajoutant de la profondeur aux illustrations. La navigation est simple, il suffit de faire défiler la page de haut en bas, donnant une impression de voyage à travers le temps et les événements.

L'utilisation de plusieurs pages, avec des liens « suivant » et « précédent », aurait pu perturber la continuité de l'histoire. C'est pourquoi le choix du parallax scrolling s'est révélé être le meilleur. Les illustrations magnifiques et les effets de parallaxe intéressants rendent le défilement agréable, incitant l'utilisateur à anticiper la prochaine partie de l'histoire.

Comment intégrer l'effet scrolling parallax sur son site web ?

Pour créer un effet de défilement parallaxe en utilisant HTML et CSS, voici les étapes :

Étape 1 : Préparation du HTML

La première étape consiste à préparer votre HTML. Pour cela, créez un élément conteneur auquel appliquer l'effet parallaxe. Voici un exemple :

Étape 2 : Ajout de l'effet parallaxe avec CSS

Dans cette étape, le CSS ajoute l'effet parallaxe à l'élément conteneur. Il faut définir une image d'arrière-plan pour notre élément conteneur, lui donner une hauteur spécifique (par exemple, 500 pixels), et utiliser background-attachment : fixed ; pour créer l'effet parallaxe. Les autres propriétés d'arrière-plan sont utilisées pour centrer et redimensionner correctement l'image.

Étape 3 : Ajustement de la hauteur

Pour que l'image de parallaxe couvre toute la hauteur de l'écran, il est indispensable de définir la hauteur du conteneur de parallaxe à 100 % et définir height : 100 % pour les éléments <html> et <body> de la page.

Il est crucial de tester l'effet parallaxe sur une variété de navigateurs et de dispositifs. Il est possible que des ajustements soient nécessaires pour optimiser l'affichage en fonction des spécificités de chaque navigateur ou taille d'écran.

À noter que l'exemple fourni ici reste basique. Des effets de parallaxe plus sophistiqués, impliquant des animations ou des mouvements plus profonds, exigent l'utilisation de JavaScript ou d'une bibliothèque JavaScript telle que jQuery.

Enfin, il convient de prêter attention à l'impact du parallax scrolling sur l'expérience utilisateur. S'il est mal appliqué, il pourrait en effet entraver la navigation du site. Il est donc fortement conseillé de le tester avec de véritables utilisateurs pour s'assurer que l'effet parallaxe sert à enrichir l'expérience, plutôt qu'à la dégrader.

Bonus : le parallax scrolling avec un CMS

L'usage d'un système de gestion de contenu (CMS) pour un site web facilite l'intégration d'un effet de défilement parallaxe, grâce à l'utilisation de plugins ou de modules complémentaires.

WordPress, par exemple, offre des plugins comme « Modules Qi pour Elementor » ou « Advanced WordPress Backgrounds ». Ces outils facilitent l'insertion d'effet parallaxe dans le site. Les interfaces proposées permettent de définir des images d'arrière-plan parallaxe, d'ajuster la vitesse et la direction du défilement, et bien plus encore.

Pour Joomla !, des extensions comme « Parallax Scroll » peuvent être utilisées.

Pour les constructeurs de sites web tels que Wix ou Squarespace, l'option de parallaxe scrolling se trouve généralement intégrée dans leur éditeur de site. L'activation de cette option pour les sections souhaitées et le téléchargement de l'image d'arrière-plan se font simplement.

Pour aller plus loin, téléchargez le guide d'introduction aux langages HTML et CSS.