Scroll Snap

Les diapositives défilent horizontalement dans une fenêtre visible et s’aimantent une à une en place.

Ajoute un carrousel (Carousel Slide, aussi appelé slider ou swipe carousel) sur [où].
Chaque étape doit faire glisser la rangée latéralement pour que la diapositive suivante s’aimante au centre, fluide et en ralentissant, avec les voisines qui dépassent sur les bords et les points de position qui suivent.
Avance d’une diapositive à la fois, prends en charge le balayage tactile ainsi que les boutons et les flèches du clavier, et donne des libellés aux contrôles pour les lecteurs d’écran.

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

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

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.

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

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