Le défilement comme récit

Le défilement est le geste le plus fréquent sur le web. Bien utilisé, il devient un fil narratif : chaque section arrive au bon moment, avec juste assez de mouvement pour être remarquée.

Révéler, pas distraire

Une apparition au défilement doit être courte et discrète : un léger fondu, une translation de quelques pixels. Si l’on remarque l’animation avant le contenu, elle est trop forte (voir aussi animer sans ralentir).

.reveal {
  opacity: 0;
  translate: 0 12px;
  transition: opacity 400ms ease, translate 400ms ease;
}
.reveal.isVisible {
  opacity: 1;
  translate: 0 0;
}

Observer plutôt qu’écouter

J’utilise IntersectionObserver (nouvel onglet) pour déclencher les apparitions. Écouter l’événement scroll à chaque image coûte cher et rend la page saccadée.

Une seule fois

Un élément apparaît une fois, puis reste en place. Le rejouer à chaque passage fatigue vite, surtout quand on remonte la page pour retrouver une information.

durée d’une apparition

300–500 ms

translation suffisante

8–16 px

seule lecture par élément

1

Le rythme d’une page

Toutes les sections n’ont pas besoin d’animation. J’en garde pour les moments clés (un chiffre, une image forte, un appel à l’action) et je laisse le reste simplement apparaître.

En résumé

• Des apparitions courtes, sans effet spectaculaire.
• IntersectionObserver plutôt que l’événement scroll.
• Une animation par élément, jouée une seule fois.
• Le mouvement réservé aux moments qui comptent.