Stacking Cards

Des cartes s’empilent avec de légers décalages et celle du dessus s’écarte pour révéler la suivante.

Ajoute un « Card Stack » (aussi appelé stacked cards) sur [où].
Empile les cartes avec de légers décalages l’une derrière l’autre ; chaque appui doit faire pivoter la carte du dessus sur le côté et la glisser à l’arrière, pendant que les autres avancent : fluide, léger et vif.
Rends-le utilisable au clavier, laisse les lecteurs d’écran atteindre chaque carte dans l’ordre et utilise un simple fondu si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Un élément reste fixé sur place pendant une portion du défilement tandis que le reste du contenu ou l’animation progresse.

Ajoute un effet de défilement « Pinning » (aussi appelé pinned section ou sticky section) sur [où].
Un panneau doit rester fixé sur place pendant que le contenu à côté défile, en changeant selon l’étape en cours de lecture, puis se libérer à la fin de la section.
Préfère le positionnement sticky natif plutôt que de détourner le défilement, et assure-toi que chaque étape reste lisible sans le panneau épinglé sur petit écran.

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.

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.

De grandes lignes de texte glissent horizontalement pendant que la page défile verticalement.

Ajoute un « Text Marquee on Scroll » (aussi appelé scroll text marquee ou scroll velocity text) sur [où].
De grandes lignes de texte doivent glisser latéralement quand la page défile vers le bas, une ligne sur deux dans le sens opposé, puis revenir quand on remonte.
Lie le mouvement à la position de défilement, empêche les longues lignes de créer une barre de défilement horizontale, et garde-les immobiles 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).