CSS natif pour l'effet parallaxe : fini le JavaScript

Comment ça marche

Le principe central : view-timeline-name. Au lieu de mesurer le temps en millisecondes, tu mesures la progression de l'animation par rapport au défilement. Quand l'élément commence à entrer dans la fenêtre, la timeline passe de 0 %, et quand il sort complètement, elle atteint 100 %.

Voici la classe qui fait tout :

.parallax {
  view-timeline-name: --parallax-tl;
  view-timeline-axis: block;
  overflow: hidden;
}

.parallax > * {
  scale: calc(1 + var(--parallax-offset, 20) * 2 / 100);
  animation: parallax auto linear both;
  animation-timeline: --parallax-tl;
  animation-range: cover;
  will-change: translate;
}

@keyframes parallax {
  from { translate: 0 calc(var(--parallax-offset, 20) * -1%);
  to { translate: 0 calc(var(--parallax-offset, 20) * 1%);
}

La clé : animation-timeline: --parallax-tl détache l'animation de l'horloge du navigateur et l'attache à ta timeline de défilement. animation-range: cover assure que l'animation joue sur toute la durée de visibilité de l'élément.

Pourquoi il faut mettre l'élément à l'échelle

Si tu translatees un enfant vers le haut ou vers le bas sans le redimensionner, tu vois des bandes vides (l'arrière-plan du conteneur). La solution : agrandir l'enfant avec scale.

Avec un offset de 20 (la valeur par défaut), l'enfant atteint 140 % de sa taille. Les surplus sont cachés par overflow: hidden du conteneur. Peu importe où se déplace l'enfant dans sa plage de ±20 %, il y a toujours du contenu pour remplir le cadre.

L'élégance du système : la même variable --parallax-offset contrôle à la fois la translation et la mise à l'échelle. Augmente l'offset pour renforcer l'effet, et la mise à l'échelle s'ajuste automatiquement — aucun calcul manuel, aucun espace vide qui revient.

<div class="parallax" style="--parallax-offset: 30;">
  <img src="…" />
</div>

Respecter les préférences d'accessibilité

Tous les utilisateurs n'apprécient pas les animations de mouvement. Si quelqu'un a activé prefers-reduced-motion: reduce dans ses paramètres d'accessibilité, tu dois désactiver l'effet :

@media (prefers-reduced-motion: reduce) {
  .parallax > * {
    animation: none;
    scale: 1;
  }
}

Avantages par rapport au JavaScript

Fini les écouteurs d'événements de défilement qui recalculent les positions à chaque image. Les animations scroll-driven s'exécutent sur le thread compositeur du navigateur, bien séparé du thread principal. Résultat : des performances nettement meilleures, surtout sur mobile.

Et franchement, c'est plus lisible : une déclaration CSS vaut mille lignes de JS pour faire pareil.