# Effet parallaxe : la profondeur au défilement et en motion design

[Canonical HTML page](https://gradiently.design/fr/guide/parallax-effect)

La parallaxe emprunte une astuce à vos propres yeux : ce qui est proche bouge plus vite que ce qui est loin. Dosée légèrement, elle ajoute de la profondeur à une page ou à une boucle ; poussée trop loin, elle donne le mal de mer. Voici comment bien la faire.

## The short version

- Un effet parallaxe crée de la profondeur en déplaçant des calques à des vitesses différentes, les plus proches bougeant plus vite que les plus éloignés.
- Sur le web, le défilement parallaxe peut désormais se construire en CSS avec les animations liées au défilement, sans JavaScript, dans les navigateurs qui les prennent en charge.
- L’ancienne technique `background-attachment: fixed` est ignorée par Safari sur iOS, il ne faut donc pas compter dessus sur mobile.
- Un mouvement de parallaxe ample ou rapide peut provoquer un malaise chez les personnes atteintes de troubles vestibulaires : il faut le désactiver quand un visiteur préfère un mouvement réduit.
- Une parallaxe subtile, avec des calques qui ne bougent qu’un peu, ajoute de la profondeur sans détourner l’attention du contenu.

Un **effet parallaxe** donne de la profondeur à une création plate en déplaçant ses calques à des vitesses différentes : le fond dérive lentement, le plan intermédiaire un peu plus vite et le premier plan encore plus vite, comme les collines lointaines qui semblent ramper derrière la vitre d’un train pendant que les poteaux défilent à toute allure. Sur un site web, cela se produit en général au défilement. En motion design, cela se produit dans le temps, dans une boucle ou une vidéo. Dans les deux cas, la meilleure parallaxe est discrète, lente et désactivée pour quiconque a demandé à son appareil moins de mouvement.

## Comment la parallaxe crée de la profondeur

Votre cerveau évalue les distances en partie grâce au mouvement relatif. Quand deux calques bougent à la même vitesse, ils se lisent comme une seule surface plane. Quand l’un bouge plus lentement, il paraît plus éloigné. Trois calques suffisent généralement à créer une profondeur convaincante.

| Calque | Vitesse par rapport au défilement | Contenu |
| --- | --- | --- |
| Arrière-plan | La plus lente, environ 10 % à 30 % du défilement | Un dégradé, un ciel, une texture ou un champ de couleur doux |
| Plan intermédiaire | Moyenne, environ la moitié | Formes, photos, illustrations |
| Premier plan | Vitesse de défilement normale | Titres, boutons, le contenu lui-même |

Une parallaxe simple à trois calques. Gardez le contenu sur le calque qui défile normalement, pour que la lecture ne soit jamais perturbée.

> **Le texte reste en place** Ne placez jamais le texte courant ni les boutons sur un calque de parallaxe en mouvement. Des mots qui glissent à une autre vitesse que la page sont fatigants à lire et difficiles à cliquer.

## L’effet parallaxe en CSS avec les animations liées au défilement

Le CSS moderne peut lier une animation à la position de défilement plutôt qu’au temps, grâce à `animation-timeline`. Le navigateur l’exécute hors du thread principal, elle reste donc fluide, et aucun JavaScript n’est nécessaire. La prise en charge progresse encore : elle fonctionne dans les navigateurs Chromium et les versions récentes de Safari, alors vérifiez [la compatibilité sur MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timeline) et traitez l’effet comme une amélioration. Sans prise en charge, la page ne bouge simplement pas, ce qui convient très bien.

```css
.hero {
  position: relative;
  overflow: clip;
  isolation: isolate;          /* keeps the layer inside the hero */
  min-height: 80vh;
  view-timeline: --hero block;
}

.hero__bg {
  position: absolute;
  inset: -15% 0;               /* extra room so edges never show */
  background:
    radial-gradient(circle at 75% 20%, #7c3aed 0%, transparent 45%),
    linear-gradient(170deg, #0f0b1e 0%, #1e1b4b 100%);
  z-index: -1;
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .hero__bg {
      animation: hero-depth linear both;
      animation-timeline: --hero;
    }
  }
}

@keyframes hero-depth {
  from { transform: translateY(-10%); }
  to   { transform: translateY(10%); }
}
```

Le calque d’arrière-plan bouge un peu pendant que le hero traverse la fenêtre. Il ne s’exécute que là où c’est pris en charge et où le visiteur n’a pas demandé de mouvement réduit.

L’ampleur du mouvement se règle dans les keyframes : 10 % dans chaque sens, c’est doux. Au-delà de 20 %, l’effet commence à ressembler à un manège. Animer `transform` plutôt que `top` ou `background-position` le rend peu coûteux à dessiner pour le navigateur. [La performance des dégradés CSS](https://gradiently.design/fr/guide/css-gradient-performance) explique pourquoi les grands dégradés animés doivent se déplacer, pas se redessiner.

## D’autres façons de créer un défilement parallaxe

| Méthode | Principe | Points de vigilance |
| --- | --- | --- |
| Animations liées au défilement | `animation-timeline: view()` ou `scroll()` lie les keyframes au défilement | Pas encore dans tous les navigateurs ; à construire comme une amélioration |
| `background-attachment: fixed` | Le fond reste immobile pendant que le contenu défile par-dessus | Ignoré par Safari sur iOS ; une seule vitesse fixe |
| Perspective 3D en CSS | Les calques repoussés avec `translateZ` défilent plus lentement | Mise à l’échelle et conteneur de défilement délicats à régler |
| JavaScript au défilement | Un script déplace les calques pendant le défilement de la page | Peut saccader s’il tourne à chaque événement de défilement ; utilisez `requestAnimationFrame` |

Quatre techniques. Pour un nouveau site, les animations liées au défilement sont le choix le plus propre.

## Parallaxe et mouvement réduit

Pour les personnes atteintes de troubles vestibulaires, un mouvement ample déclenché par le défilement peut provoquer vertiges et nausées. Les recommandations WCAG sur [l’animation déclenchée par les interactions](https://www.w3.org/WAI/WCAG22/Understanding/animation-from-interactions.html) demandent que ce type de mouvement puisse être désactivé. Le plus simple pour le respecter est d’envelopper la parallaxe dans `prefers-reduced-motion: no-preference`, comme dans le code ci-dessus, pour qu’elle ne s’exécute que chez les visiteurs qui n’ont pas demandé moins de mouvement. [Prefers reduced motion](https://gradiently.design/fr/guide/reduced-motion) détaille la media query et comment la tester.

### À éviter

- Des sections entières qui glissent à des vitesses différentes
- Du texte ou des boutons sur des calques en mouvement
- Un mouvement qui ignore les réglages de mouvement réduit
- Un détournement du défilement qui en change la vitesse
- De la parallaxe dans chaque section de la page

### À faire

- Un seul calque d’arrière-plan qui bouge un peu
- Le contenu sur le défilement normal
- Du mouvement uniquement sous `no-preference`
- Un défilement natif, intact
- La parallaxe à un seul endroit : généralement le hero

## La parallaxe en motion design et en vidéo

La parallaxe ne sert pas qu’au défilement. Dans une publication animée, une boucle ou un générique, la même règle crée de la profondeur dans le temps : un fond qui dérive lentement, de la lumière ou des particules qui bougent un peu plus vite, et des mots immobiles devant. Ce dernier point compte. Des mots fixes sur un champ qui bouge doucement paraissent calmes et sûrs d’eux, alors que des mots qui dérivent eux aussi semblent instables.

Un hero de site panoramique avec le titre Conçu pour durer pour une marque outdoor, du texte fixe sur un dégradé qui bouge lentement

Un hero de site avec de la profondeur : le champ de fond bouge lentement derrière des mots immobiles, l’œil lit donc le titre en premier.

Les particules forment un plan intermédiaire naturel : [les effets de particules](https://gradiently.design/fr/guide/particles-effect) montre comment de petites poussières discrètes, un peu plus rapides que le fond, ajoutent un second plan de profondeur. Gardez le mouvement de chaque calque lent et adouci ; [les principes du motion design](https://gradiently.design/fr/guide/motion-design-principles) explique pourquoi.

## Concevoir un hero en parallaxe, étape par étape

1. **Concevez-le d’abord immobile** Le hero doit paraître abouti sans aucun mouvement, car c’est ce que verront les visiteurs en mouvement réduit et les navigateurs non compatibles.
2. **Séparez les calques** Placez le champ de couleur du fond sur son propre calque, les formes ou photos sur un deuxième, et le titre et le bouton sur la page elle-même.
3. **Ne bougez que le calque du fond** Commencez par faire bouger le fond seul de 10 % dans chaque sens. N’ajoutez un plan intermédiaire que si la profondeur l’exige.
4. **Testez sur un téléphone** Vérifiez que le défilement reste fluide sur un téléphone de milieu de gamme et que rien ne saute sur Safari iOS.
5. **Activez le mouvement réduit et revérifiez** Dans les réglages d’accessibilité de votre système, demandez un mouvement réduit et confirmez que la page est calme et complète.

- Calque lointain : ciel de nuit: `linear-gradient(180deg, #0c1445 0%, #1e3a8a 50%, #60a5fa 100%)`
- Plan intermédiaire : lueur d’horizon: `radial-gradient(ellipse at 50% 100%, #f59e0b 0%, #b45309 35%, #1e3a8a 75%)`
- Calque proche : premier plan sombre: `linear-gradient(180deg, #374151 0%, #111827 55%, #0a0a0a 100%)`

Trois calques de dégradé pour un hero en parallaxe. Superposés, avec le calque lointain qui bouge le moins, ils se lisent comme ciel, horizon et premier plan.

Pour le calque de fond lui-même, un dégradé vivant fait plus qu’un dégradé plat. Un Mark Gradiently exporté avec Pro en boucle WebM ou MP4 sans raccord, placé derrière votre hero, donne à la page un arrière-plan qui bouge déjà doucement et qui n’appartient qu’à vous une fois réservé. Associez-le à [la conception de section hero](https://gradiently.design/fr/guide/hero-section-design) et [aux fonds de hero de site](https://gradiently.design/fr/guide/website-hero-background) pour les dimensions.

## FAQ

### Qu’est-ce qu’un effet parallaxe ?

Une façon de créer de la profondeur en déplaçant des calques à des vitesses différentes, les plus proches bougeant plus vite que les plus lointains, comme dans la réalité.

### Peut-on créer un effet parallaxe uniquement en CSS ?

Oui. Les animations CSS liées au défilement associent les keyframes à la position de défilement sans JavaScript, dans les navigateurs qui prennent en charge `animation-timeline`. Les anciennes méthodes en pur CSS utilisent `background-attachment: fixed` ou la perspective 3D.

### Pourquoi background-attachment: fixed ne fonctionne-t-il pas sur iPhone ?

Safari sur iOS ignore les fonds fixes, le fond défile donc normalement. Utilisez plutôt les animations liées au défilement ou une technique basée sur transform.

### Le défilement parallaxe nuit-il à l’accessibilité ?

Un mouvement ample déclenché par le défilement peut rendre malades les personnes atteintes de troubles vestibulaires. Gardez-le subtil et désactivez-le quand un visiteur préfère un mouvement réduit.

### La parallaxe nuit-elle aux performances ?

Pas si vous animez `transform` et laissez le navigateur la piloter avec les animations liées au défilement. Ce sont les scripts qui déplacent des éléments à chaque événement de défilement qui provoquent des saccades.