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

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.

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 et traitez l’effet comme une amélioration. Sans prise en charge, la page ne bouge simplement pas, ce qui convient très bien.

.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%); }
}

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 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

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 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 détaille la media query et comment la tester.

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.

Les particules forment un plan intermédiaire naturel : les effets de particules 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 explique pourquoi.

Concevoir un hero en parallaxe, étape par étape

1. 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. 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. 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. 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. 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.

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 et aux fonds de hero de site pour les dimensions.