Défilement parallaxe en CSS pur : perspective et scroll-driven
Créez un effet parallaxe avec perspective et translateZ en CSS, ou avec des animations liées au défilement, voyez les calculs de profondeur en direct, et gérez correctement les téléphones et le mouvement réduit.
Le parallaxe en CSS pur repose sur deux méthodes fiables. La méthode perspective crée un conteneur de défilement avec perspective, repousse les calques d'arrière-plan avec translateZ, puis les agrandit d'un facteur égal à (perspective moins z) divisé par perspective. La méthode plus récente lie une animation translate à animation-timeline: view(). Les deux doivent se désactiver avec prefers-reduced-motion.
Trois façons d'obtenir un effet parallaxe
Méthode
Comment ça bouge
Points de vigilance
perspective + translateZ
Les calques plus profonds défilent plus lentement dans un conteneur de défilement 3D
Nécessite son propre conteneur de défilement, pas la page
animation-timeline: view()
Un translate en keyframes suit l'élément à travers le viewport
Chrome et Edge 115+, Safari 26+, Firefox 161+
background-attachment: fixed
Le fond reste immobile pendant que le contenu défile par-dessus
Support partiel sur iOS Safari ; saccades sur de nombreux téléphones
Solution de repli en JavaScript
La position de défilement définit un transform à chaque frame
Utilisez requestAnimationFrame et un listener passif
La plupart des tutoriels sur le parallaxe s'arrêtent à background-attachment: fixed, que les iPhone ne prennent en charge que partiellement. Ce guide présente les deux méthodes qui animent réellement des calques, explique le calcul de l'échelle pour que vos calques ne rétrécissent pas, et fournit un petit script de repli ainsi que la gestion du mouvement réduit qui évite de donner la nausée à qui que ce soit.
Déplacez le curseur de profondeur dans le bac à sable pour repousser le calque d'arrière-plan.
Faites défiler l'aperçu et comparez la vitesse du calque arrière à celle du texte au premier plan.
Lisez l'échelle et la vitesse calculées, qui sont celles qu'utilise le CSS ci-dessous.
Copiez la méthode adaptée : perspective pour un hero contenu, view() pour des sections sur une page normale.
Un calque à translateZ(z) sous une perspective p se déplace à p divisé par (p moins z) de la vitesse de défilement.
Définissez overflow-x: hidden sur le conteneur parallaxe, car les calques agrandis sont plus larges que leur boîte.
Déclarez animation-timeline après le raccourci animation, car le raccourci le réinitialise à auto.
Placez le mouvement dans @media (prefers-reduced-motion: no-preference) pour que l'effet soit activé seulement si rien ne s'y oppose.
Questions fréquentes
Pourquoi mon calque en translateZ paraît-il plus petit ?
Éloigner un élément de l'observateur avec un translateZ négatif le rétrécit, exactement comme un objet lointain. Ajoutez scale((p - z) / p) pour lui rendre sa taille. Avec perspective: 1px et translateZ(-2px), cela donne scale(3).
background-attachment: fixed fonctionne-t-il sur mobile ?
Pas de façon fiable. caniuse n'indique qu'un support partiel dans iOS Safari et précise que la plupart des appareils mobiles mettent du temps à mettre à jour un fond fixe après le défilement. Considérez-le comme un bonus réservé au bureau et utilisez l'une des méthodes à base de transform quand l'effet compte.
Le parallaxe est-il mauvais pour l'accessibilité ?
Un mouvement important lié au défilement peut provoquer vertiges ou nausées chez les personnes atteintes de troubles vestibulaires. Respectez le réglage de réduction des animations du système d'exploitation avec la media query prefers-reduced-motion et affichez les calques de façon statique quand il est activé.
Quels navigateurs prennent en charge le parallaxe lié au défilement ?
En octobre 2026, caniuse indique animation-timeline dans Chrome et Edge à partir de 115, Safari à partir de 26 et Firefox à partir de 161. Les navigateurs plus anciens ignorent simplement l'animation, et la page reste lisible sans l'effet.
Comment fonctionne la méthode perspective
Le conteneur devient l'élément qui défile et reçoit une valeur de perspective. Ses enfants conservent leur position 3D grâce à transform-style: preserve-3d. Quand le conteneur défile, un calque placé plus loin en z parcourt moins de distance à l'écran qu'un calque à z égal à zéro, il semble donc traîner derrière.
Comme perspective sur un élément crée aussi un contexte d'empilement et un bloc conteneur pour les enfants fixes, gardez l'enveloppe parallaxe autonome. Les en-têtes qui doivent rester fixés à la fenêtre doivent se trouver en dehors.
Téléphones et anciens navigateurs
L'article de Chrome sur le parallaxe performant note que le défilement inertiel sur iOS aplatissait autrefois le contexte 3D, ce qui cassait l'astuce de la perspective sur iPhone. Testez sur un vrai appareil, et gardez le contenu lisible quand les calques ne bougent pas.
La méthode liée au défilement n'a pas ce problème, car elle s'appuie sur le défilement normal de la page. Là où elle n'est pas prise en charge, les keyframes ne s'exécutent jamais et le calque reste dans sa position de repos, ce qui constitue un repli propre.
Méthode 1 : perspective et translateZ
Hero à deux calques dans son propre conteneur de défilement
Faites défiler à l'intérieur du cadre. Le calque rayé est à translateZ(-2px) et agrandi d'un facteur 3, il se déplace donc au tiers de la vitesse de défilement.
Méthode 2 : animation liée au défilement avec view()
Image qui glisse quand sa section traverse l'écran
L'animation ne s'exécute que là où animation-timeline est pris en charge et si le lecteur n'a pas demandé de mouvement réduit.
Solution de repli en JavaScript
Petit parallaxe avec requestAnimationFrame
Utilisé uniquement quand les animations liées au défilement sont absentes. Le listener est passif et le travail se fait une fois par frame.
Bac à sable de profondeur
Profondeur du calque arrière (translateZ) : {n}px
Échelle nécessaire : {v}
Vitesse du calque arrière : {v} du défilement
Aperçu du parallaxe, faites défiler à l'intérieur
Le texte au premier plan bouge à pleine vitesse
Continuez à faire défiler pour voir le calque arrière traîner derrière.
Votre appareil demande un mouvement réduit, l'aperçu reste donc immobile.