Pinning

Le texte reste épinglé pendant que ses lignes apparaissent et disparaissent en fondu selon la progression du défilement.

Ajoute un effet « Sticky Text Fade » (aussi appelé sticky scroll text opacity fade) sur [où].
Pendant le défilement de la section, le bloc de texte doit rester épinglé en place et ses lignes doivent apparaître et disparaître en fondu une à une selon la progression du défilement.
Lie les fondus directement à la position de défilement pour qu’ils s’inversent en remontant, et garde chaque ligne accessible aux lecteurs d’écran, quelle que soit son opacité.

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.

Le défilement vertical fait glisser latéralement une rangée de panneaux épinglée.

Ajoute une section à défilement horizontal (Horizontal Scroll Section) sur [où], aussi appelée horizontal scrolling ou scroll-jacked horizontal gallery.
Quand la section atteint le haut, elle doit rester épinglée pendant que le défilement vers le bas fait glisser sa rangée de panneaux sur le côté, puis se libérer une fois le dernier panneau visible.
Lie le mouvement latéral directement à la position de défilement pour que remonter l’inverse, et reviens à une rangée normale qu’on fait glisser au doigt sur petit écran ou si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Un en-tête fixe réduit sa hauteur ou sa taille quand l’utilisateur fait défiler vers le bas.

Ajoute un « Sticky Header Shrink » (aussi appelé shrinking header ou shrink on scroll) sur [où].
L’en-tête doit rester en haut et, dès que le lecteur descend un peu, se réduire en douceur en une barre plus fine avec un logo plus petit, puis reprendre sa taille quand il revient tout en haut.
Évite que le contenu en dessous ne saute pendant que l’en-tête change de taille.

Une barre ou un anneau se remplit à mesure que l’utilisateur fait défiler la page ou l’article.

Ajoute une barre de progression de lecture (Scroll Progress Indicator, aussi appelée reading progress bar) sur [où].
Une fine barre en haut doit se remplir de gauche à droite au fil du défilement, jusqu’à occuper toute la largeur à la fin.
Lie-la directement à la position de défilement, sans retard de lissage, et fais en sorte qu’elle ne masque pas le contenu.

Le défilement se cale sur des points d’accroche définis, comme des diapositives ou des sections.

Ajoute « Scroll Snap » (aussi appelé scroll snapping ou snap scrolling) sur [où].
Quand le défilement s’arrête, la vue doit se caler proprement sur la section la plus proche, pour que chacune s’aligne sur le bord au lieu de s’arrêter à mi-chemin.
Utilise l’accroche native du navigateur pour que la molette, le tactile et le clavier continuent de fonctionner, et vérifie qu’un contenu plus haut que la vue reste lisible en entier.

La progression de l’animation est liée directement à la position de défilement : défiler vers l’avant ou l’arrière la joue ou la rembobine.

Ajoute une « Scroll-Linked Animation » (aussi appelée scroll-driven animation ou scroll scrub) sur [où].
L’animation doit suivre exactement la position de défilement : descendre la fait avancer, remonter la rembobine aussitôt, sans easing temporel propre.
Associe toute l’animation à une plage de défilement claire, et affiche un état statique cohérent si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).