L’effet parallaxe est une bonne idée pour un site d’entreprise seulement s’il sert un message précis : raconter une histoire, mettre en scène un produit ou guider le regard vers une action. Utilisé partout, il ralentit le site, gêne une partie des visiteurs et dégrade l’expérience sur mobile. La bonne approche consiste donc à le réserver à une ou deux sections, à l’alléger et à prévoir une version sans animation.
Qu’est-ce que l’effet parallaxe sur un site web ?
L’effet parallaxe consiste à faire défiler plusieurs couches d’une page à des vitesses différentes. Typiquement, une image de fond avance plus lentement que le texte posé dessus, ce qui donne une impression de profondeur. Le principe vient de l’animation et du jeu vidéo, où l’on fait glisser les décors lointains moins vite que les éléments proches.
Sur le web, on rencontre trois formes courantes :
- Le fond fixe ou ralenti : une image en arrière-plan bouge peu pendant que le contenu défile. C’est la forme la plus simple et la plus légère.
- Les couches multiples : plusieurs éléments (illustrations, formes, textes) se déplacent chacun à leur rythme pour créer une scène.
- Le storytelling au défilement : la page entière est pensée comme un récit, chaque étape du scroll déclenchant une animation.
Quels sont les intérêts de l’effet parallaxe pour une entreprise ?
Bien employé, l’effet parallaxe apporte trois bénéfices concrets.
Donner du relief à une page de présentation
Sur une page d’accueil ou une page « À propos », un léger effet de profondeur rend la lecture plus vivante. Un architecte peut par exemple faire apparaître progressivement les photos d’un projet, du terrain nu jusqu’au bâtiment livré.
Raconter une histoire étape par étape
Pour expliquer un processus (fabrication, méthode de travail, parcours client), le défilement découpe naturellement le récit en séquences. Le visiteur avance à son rythme et retient mieux l’enchaînement.
Mettre en valeur un produit
Un fabricant de mobilier ou une marque de cosmétiques peut utiliser des couches pour montrer un objet sous plusieurs angles. L’animation attire l’œil sur le détail qui fait la différence.
Quels sont les inconvénients à connaître ?
Les limites de l’effet parallaxe sont réelles et souvent sous-estimées au moment de la maquette.
La performance
Les effets reposent sur de grandes images et du JavaScript qui recalcule les positions à chaque mouvement de défilement. Résultat : un temps de chargement plus long et des saccades sur les appareils modestes. Or la vitesse et la stabilité visuelle de la page font partie des critères mesurés par Google, comme nous l’expliquons dans notre article sur les Core Web Vitals et la façon d’améliorer ses scores.
L’accessibilité
Les mouvements de fond peuvent provoquer des nausées ou des vertiges chez les personnes sensibles aux troubles vestibulaires. Ils compliquent aussi la lecture pour les personnes malvoyantes ou qui utilisent un lecteur d’écran, surtout si le texte est intégré dans des images. Les règles décrites dans notre guide sur l’accessibilité RGAA s’appliquent pleinement à ces animations.
Le mobile
Sur smartphone, certains navigateurs gèrent mal les fonds fixes et désactivent l’effet ou l’affichent de travers. Comme une grande part des visites se fait aujourd’hui sur mobile, un effet pensé uniquement pour un grand écran perd vite son intérêt.
Le référencement
Les sites construits sur une seule longue page animée regroupent tout le contenu au même endroit. Ils se positionnent donc plus difficilement sur plusieurs requêtes, faute de pages dédiées à chaque service.
Dans quels cas l’effet parallaxe sert-il votre message ?
Posez-vous une question simple : l’animation aide-t-elle le visiteur à comprendre ou à agir ? Si la réponse est oui, l’effet a sa place. Voici les situations où il fonctionne bien :
- Une page de lancement pour un nouveau produit ou un événement, consultée pendant une période courte.
- Une page « Notre histoire » qui retrace des dates clés ou les étapes d’un savoir-faire.
- Un portfolio de photographe, d’architecte ou de designer, où l’image est le cœur du message.
- Une section d’en-tête sur la page d’accueil, avec un effet très léger sur une seule image.
Quand vaut-il mieux éviter l’effet parallaxe ?
À l’inverse, renoncez à l’effet dans ces cas :
- sur les pages qui doivent convertir vite : formulaire de devis, page de contact, fiche produit ;
- sur un site où l’information prime : cabinet d’avocats, expert-comptable, cabinet médical, dont les visiteurs cherchent une réponse rapide ;
- quand votre public est âgé ou équipé d’appareils anciens ;
- quand le budget ne permet pas de tester correctement l’effet sur plusieurs navigateurs et téléphones.
Un artisan couvreur, par exemple, gagnera davantage à afficher clairement ses zones d’intervention, ses réalisations et son numéro de téléphone qu’à animer son bandeau d’accueil.
Comment intégrer un effet parallaxe sans pénaliser son site ?
Si vous choisissez d’utiliser l’effet, quelques règles limitent les risques :
- Limitez-le à une ou deux sections, jamais sur toute la page.
- Compressez les images et utilisez des formats récents comme le WebP ou l’AVIF.
- Privilégiez les animations en CSS plutôt que des scripts lourds qui calculent la position à chaque mouvement.
- Respectez le réglage « réduire les animations » des systèmes d’exploitation : le site doit alors afficher une version statique.
- Désactivez l’effet sur mobile si le rendu n’est pas fluide.
- Gardez le texte en HTML, jamais incrusté dans l’image, pour qu’il reste lisible et indexable.
- Testez sur plusieurs navigateurs et sur un téléphone d’entrée de gamme avant la mise en ligne.
Lors de la création d’un site internet, chez Gentleview, à Lyon, nous validons ce type d’effet dès la maquette, en le confrontant aux objectifs de la page et aux mesures de performance.
Questions fréquentes
L’effet parallaxe pénalise-t-il le référencement ?
Pas directement, mais il peut ralentir la page et dégrader l’expérience mobile, deux éléments pris en compte par Google. Un effet léger, limité à une section et bien optimisé, n’a en général pas d’impact notable.
Peut-on ajouter un effet parallaxe sur un site WordPress existant ?
Oui, la plupart des constructeurs de pages pour WordPress proposent l’option sur les sections avec image de fond. Vérifiez ensuite la vitesse de la page et son affichage sur mobile, car ces options ajoutent souvent du code.
Faut-il prévoir une version sans animation ?
Oui. Le site doit rester lisible et utilisable quand l’animation est désactivée, que ce soit par le navigateur, par un réglage d’accessibilité ou sur un appareil ancien.
Un projet ? Découvrez notre accompagnement : Création de site internet, ou contactez-nous pour en parler.