Scroll-Linked Animation

Une animation se joue une fois quand un élément entre dans le viewport ou en sort.

Ajoute une « Scroll-Triggered Animation » (aussi appelée reveal on scroll ou animate on scroll) sur [où].
Chaque élément doit apparaître en fondu et glisser vers le haut jusqu’à sa place une seule fois en entrant à l’écran, à son propre rythme rapide et fluide plutôt qu’en suivant la position de défilement.
Garde le contenu visible si les scripts ne se chargent pas, et affiche les éléments directement si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Des calques se déplacent à des vitesses différentes au défilement pour créer une impression de profondeur.

Ajoute un effet de parallaxe (Parallax) au défilement sur [où], aussi appelé parallax scrolling ou parallax layers.
Les calques d’arrière-plan doivent se déplacer plus lentement que le contenu pendant le défilement, le plus éloigné bougeant le moins, pour une impression de profondeur discrète.
Garde-le lié à la position de défilement sans décalage, laisse le texte sur le calque à vitesse normale, et désactive l’effet si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Un élément ou une scène s’agrandit ou rétrécit au fil du défilement.

Ajoute un effet « Zoom on Scroll » (aussi appelé scroll zoom ou scale on scroll) sur [où].
Tant que la section reste à l’écran, l’élément doit grandir en douceur d’une petite carte jusqu’à remplir toute la vue, au rythme du défilement, puis rétrécir quand on remonte.
Mets-le à l’échelle sans décaler la mise en page autour, et affiche-le à sa taille finale sans zoom si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Les mots d’un paragraphe passent de pâles à pleinement opaques au fil du défilement.

Ajoute un effet « Text Reveal » (aussi appelé scroll text reveal ou word-by-word reveal) sur [où].
Le paragraphe doit commencer pâle, puis chaque mot doit s’éclaircir jusqu’à sa pleine intensité l’un après l’autre au fil du défilement, en suivant la position de défilement.
En remontant, les mots doivent pâlir à nouveau, et tout le paragraphe doit rester accessible aux lecteurs d’écran, quelle que soit son atténuation.

Le défilement et les sauts vers les ancres glissent avec un amorti au lieu de bouger brusquement.

Ajoute un défilement fluide (Smooth Scroll, aussi appelé smooth scrolling ou inertia scroll) sur [où].
Le défilement et les sauts vers les ancres doivent glisser et ralentir en douceur au lieu d’avancer par à-coups, avec une sensation légère et réactive plutôt qu’un retard pesant.
Conserve le comportement natif, comme le défilement au clavier, la barre de défilement et la recherche dans la page, et désactive le lissage si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Les cartes restent collées en haut au défilement et s’empilent les unes sur les autres, en réduisant souvent les précédentes.

Ajoute des « Stacking Cards » (aussi appelées sticky stacking cards ou card stack scroll) sur [où].
Au défilement, chaque carte doit rester collée près du haut et la suivante doit glisser par-dessus, tandis que les cartes du dessous rétrécissent légèrement pour former une pile nette.
Laisse dépasser un fin bord de chaque carte précédente, et donne à la dernière assez de place pour atteindre sa position avant la fin de la section.