Hide on Scroll Header

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.

L’élément glisse au-delà du bord d’un conteneur et disparaît.

Ajoute une animation de sortie « Slide Out » (aussi appelée slide out up ou slide out down) sur [où].
L’élément doit glisser au-delà du bord de son conteneur et disparaître, en restant entièrement opaque : rapide, en accélérant à la sortie.
Rogne-le au bord du conteneur, rends-le inaccessible au clavier et aux lecteurs d’écran une fois hors de vue, et masque-le instantanément si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

L’élément glisse depuis l’extérieur du bord de son conteneur jusqu’à sa position de repos, sans fondu.

Ajoute une animation d’entrée « Slide In » (aussi appelée slide in left, slide in right, slide in up ou slide in down) sur [où].
L’élément doit glisser depuis l’extérieur du bord de son conteneur jusqu’à sa place, entièrement opaque du début à la fin : rapide, avec une décélération douce et sans rebond.
Rogne-le au bord du conteneur pour qu’il ne chevauche pas ses voisins et ne crée pas de barres de défilement tant qu’il est dehors, et affiche-le directement à sa place si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

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).

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 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.