Effet parallaxe sur un site web : techniques, accessibilité et limites

L’effet parallaxe donne de la profondeur à une page : le fond avance moins vite que le texte quand on fait défiler. Bien dosé, il met en valeur une photo d’hôtel ou une table de restaurant. Mal réglé, il fatigue le lecteur, alourdit la page et ne sert à rien sur un téléphone. Cet article explique ce qu’est l’effet parallaxe, les trois façons de l’obtenir aujourd’hui (dont une en CSS seul), comment le rendre accessible, ce qu’il coûte en vitesse et quand s’en passer, avec trois sites réels observés.

Qu’est-ce que l’effet parallaxe sur un site web ?

En voiture, les arbres du bord de route défilent vite et la montagne au loin presque pas : c’est la parallaxe. Sur un site, l’effet reproduit cette impression. Pendant que le visiteur fait défiler la page, l’arrière-plan et l’avant-plan ne bougent pas à la même vitesse, et l’écran paraît avoir de l’épaisseur. Le W3C le décrit dans ses explications du critère d’accessibilité 2.3.3 comme un mouvement où fonds et premiers plans se déplacent à des rythmes différents.

Deux familles d’effets se côtoient. Dans la première, le fond reste immobile et le contenu glisse par-dessus. Dans la seconde, les éléments se décalent à des vitesses différentes (une photo monte moins vite que le bloc de texte voisin). Dans les deux cas, le but est le même : mettre en scène une photo ou un message, pas ajouter un gadget. Un effet parallaxe ne remplace ni de bonnes photos, ni un texte clair, ni une page rapide.

Trois façons d’obtenir un effet parallaxe

Longtemps, il a fallu du JavaScript pour tout. Aujourd’hui, le CSS fait une partie du travail. Les données de compatibilité de MDN, consultées le 17 octobre 2026, donnent la situation suivante.

Sources : MDN, background-attachment et animation-timeline. Côté JavaScript, Chrome for Developers rappelle que les animations pilotées par le défilement en CSS peuvent s’exécuter hors du fil principal, alors que les animations déclenchées par des événements de défilement y restent soumises aux saccades.

Technique 1 : le fond fixe

C’est la plus simple. Une section reçoit une image de fond, et on demande au navigateur de la fixer par rapport à la fenêtre :

.section-fond {
  background-image: url("/images/salon.jpg");
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}

/* Sur petit écran, on revient à un fond qui défile normalement */
@media (max-width: 800px) {
  .section-fond { background-attachment: scroll; }
}

Avec fixed, MDN précise que l’image est fixée par rapport à la fenêtre : elle ne bouge pas quand l’élément ou son contenu défile. Sur iPhone et iPad, la valeur est reconnue mais sans effet (bogue 275247 de WebKit, signalé dans les données de MDN) : la section s’affiche avec une image qui défile comme le reste. Le design doit donc rester beau sans l’effet.

Home Sweet Home Paris : un motif qui ne bouge pas

Sur parisluxurystay.com, une de nos réalisations, la section « Découvrir Paris comme un initié » repose sur un fond à motif de feuilles dorées. Les deux captures ci-dessous sont prises à 300 pixels de défilement d’écart : le titre et les cartes sont montés, le motif est resté exactement au même endroit. Dans notre test à la largeur d’un téléphone (375 pixels), ce fond n’est plus fixe.

Les Jardins de la Livrée : un filigrane fixe sur toute la page

Sur la-livree.fr (la réalisation), le fond fixe s’applique à toute la page : une illustration discrète en filigrane reste à gauche de l’écran pendant que les sections défilent devant elle. C’est l’usage le plus sobre de la parallaxe : aucun mouvement brusque, seulement une impression de profondeur.

Technique 2 : les animations liées au défilement, en CSS seul

La méthode la plus récente remplace le JavaScript. On écrit une animation ordinaire, puis on dit au navigateur de la faire avancer avec le défilement plutôt qu’avec le temps (animation-timeline). La fonction view() suit le passage d’un élément dans la fenêtre, scroll() suit le défilement d’un conteneur (MDN, animations pilotées par le défilement). Voici une photo qui avance moins vite que la page :

.parallaxe {
  position: relative;
  height: 60vh;
  overflow: clip;            /* le cadre rogne l'image */
}
.parallaxe img {
  display: block;
  width: 100%;
  height: 130%;              /* 30 % de marge pour le décalage */
  object-fit: cover;
}

@keyframes decalage {
  from { transform: translateY(-23%); }
  to   { transform: translateY(0); }
}

/* Si le navigateur sait faire, et si le visiteur
   n'a pas demandé de réduire les animations */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .parallaxe img {
      animation: decalage linear both;
      animation-timeline: view();
    }
  }
}

L’image est 30 % plus haute que son cadre. Pendant que le cadre traverse l’écran, elle descend de 30 % de la hauteur du cadre (23 % de sa propre hauteur), donc elle avance moins vite que la page : c’est la parallaxe. Seul transform est animé. Nous avons vérifié ce code sur Chromium : l’image se décale pendant le défilement et reste immobile quand la préférence « réduire les animations » est active.

Technique 3 : JavaScript et réglages d’un outil de création de pages

Quand le décalage doit suivre plusieurs éléments, on passe par un script, ou par les réglages de mouvement qu’offrent certains outils de création de pages. Le principe reste le même : on lit la position de la page et on déplace des blocs d’une quantité qui dépend d’elle. Le prix à payer est la fluidité, puisque ce travail s’exécute sur le fil principal du navigateur, déjà occupé à afficher la page.

Aux 20 Plaisirs : des blocs qui se décalent, sur ordinateur seulement

Sur aux20plaisirs.fr (la réalisation), les deux cartes chiffrées posées sur la photo de la terrasse (39 producteurs à la carte, 80 références) ne défilent pas tout à fait avec elle : sur la première capture, l’une déborde sous le haut de la photo et l’autre au-dessus ; 300 pixels plus loin, toutes deux sont alignées sur le haut de la photo. Le réglage de ces blocs est limité à l’ordinateur, et c’est un bon réflexe : dans notre test à 375 pixels de large, plus aucun bloc ne se déplace.

Rendre un effet parallaxe accessible

Le mouvement lié au défilement peut déclencher des malaises chez les personnes sensibles. Le W3C parle de réactions vestibulaires (vertiges, nausées, maux de tête) et cite la parallaxe parmi les mouvements en cause. Son critère 2.3.3 (« Animation résultant d’interactions » dans la traduction française autorisée) est de niveau AAA : il demande de pouvoir désactiver les animations de mouvement qui découlent d’une interaction, sauf si elles sont essentielles. MDN rappelle de son côté que mettre à l’échelle ou déplacer de grands éléments fait partie des mouvements susceptibles de gêner.

La réponse tient en une préférence du système, prefers-reduced-motion, prise en charge par tous les navigateurs courants. Quand le visiteur a demandé de réduire les animations, on supprime le mouvement :

@media (prefers-reduced-motion: reduce) {
  .parallaxe img { animation: none; transform: none; }
  .section-fond { background-attachment: scroll; }
}

1. Respecter la préférence du système. Avec « réduire les animations », plus aucune image ne bouge ; la page reste complète.
2. Garder les amplitudes faibles. Mieux vaut un léger décalage entre deux plans qu’un grand déplacement : MDN cite le déplacement et l’agrandissement de grands éléments parmi les mouvements qui peuvent gêner.
3. Ne jamais mettre l’information dans le mouvement. Un tarif, un horaire ou un bouton ne doit pas dépendre d’une animation pour apparaître.
4. Soigner la lisibilité du texte posé sur l’image. Le texte doit rester lisible à tout moment du défilement : un voile sombre sous le titre et un contraste suffisant (critère 1.4.3 du W3C) valent mieux qu’un texte qui flotte sur une photo changeante.
5. Laisser le texte dans le HTML. Les titres et paragraphes restent de vrais textes, lus par les lecteurs d’écran et par les moteurs de recherche, jamais incrustés dans une image.

Parallaxe et vitesse du site

Une photo de fond plus grande que l’écran et un script qui tourne à chaque pixel de défilement peuvent ralentir un site. Les seuils « bons » des Core Web Vitals, selon web.dev, sont de 2,5 secondes au plus pour l’affichage du contenu principal (LCP), 200 millisecondes au plus pour la réponse aux interactions (INP) et 0,1 au plus pour les décalages de mise en page (CLS). Quelques règles aident à les respecter.

1. N’animer que transform et opacity. Selon le guide des animations de web.dev, ce sont les propriétés que le navigateur peut animer à moindre coût ; animer top, left ou la taille d’un élément force des recalculs.
2. Utiliser will-change avec parcimonie. MDN le présente comme un dernier recours, à ne pas poser par principe : employé partout, il consomme de la mémoire et peut ralentir la page.
3. Ne pas retarder l’image du haut de page. web.dev recommande de ne jamais charger en différé l’image qui fait le LCP et de lui donner fetchpriority="high". Une image placée en fond CSS est découverte plus tard par le navigateur : si elle fait le LCP, il faut la précharger, ou la mettre dans une balise img.
4. Servir des images à la bonne taille. Une photo de fond doit exister en plusieurs largeurs (AVIF et JPEG), pour que le téléphone ne télécharge pas la version pensée pour un grand écran. Une image 30 % plus haute que son cadre, comme dans l’exemple, porte 30 % de pixels en plus : autant la compresser.
5. Alléger le reste. Polices légères (voir l’article sur la typographie), peu de scripts, et pas de bibliothèque de défilement pour un seul décalage que le CSS sait faire.

Quand éviter l’effet parallaxe

• Sur la page de réservation. Le visiteur choisit des dates, compare des chambres, lit des conditions. Ici, tout mouvement distrait. Voir le tunnel de réservation et le site de réservation.
• Sur les pages de texte long (conditions, informations pratiques, articles) : les lignes qui bougent fatiguent la lecture.
• Sur un téléphone. Écran étroit, processeur modeste, connexion variable, et, sur iPhone, un fond fixe sans effet. Sur mobile, une photo bien cadrée vaut mieux qu’un effet dégradé.
• Quand la page est déjà lente. Un effet ne rattrape pas un site lourd ; il l’alourdit. Mesurez d’abord (voir les bonnes mesures pour un site d’hôtel).
• Quand le visiteur a demandé de réduire les animations. Sans exception.

La parallaxe pour un hôtel ou un restaurant

Un effet parallaxe se justifie sur les pages qui vendent une ambiance : haut de page d’accueil, présentation d’une chambre ou d’une villa, carte d’un restaurant. Pour juger de ce que donnent des pages très visuelles, parcourez nos exemples de sites d’hôtels, de resorts, d’aparthôtels ou de love rooms. Il se justifie beaucoup moins sur les pages qui servent à réserver.

1. Choisir un ou deux moments. Le haut de page et une section de photos suffisent ; si tout bouge, plus rien ne ressort.
2. Construire d’abord une page solide sans effet. Grille, hiérarchie et lisibilité, photos de qualité, chemin clair vers la réservation directe.
3. Ajouter l’effet en dernier. En CSS quand c’est possible, avec un rendu de secours propre.
4. Tester sur de vrais appareils. Un téléphone, un iPhone, un ordinateur ancien, avec et sans « réduire les animations » (voir tester son site sur tablettes et smartphones).
5. Mesurer. Vérifier le LCP, le CLS et l’INP après l’ajout, et garder l’effet seulement si la page reste rapide. Un site rapide et lisible aide le référencement (voir les techniques de référencement des sites de réservation et comment améliorer le référencement de son hôtel) et les réservations directes.

Questions fréquentes sur l’effet parallaxe