Carousel Slide (carrousel)

Les diapositives restent en place et se fondent l’une dans l’autre au lieu de glisser.

Ajoute un « Carousel Crossfade » (aussi appelé fade slideshow ou carousel fade) sur [où].
Les diapositives doivent rester en place et se fondre lentement l’une dans l’autre, l’ancienne disparaissant pendant que la suivante apparaît en même temps, puis rester affichées quelques secondes avant le changement suivant.
Reviens à la première diapositive sans coupure, mets en pause au survol ou au focus, et ne fais pas défiler automatiquement si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

L’élément central fait face tandis que les éléments latéraux s’inclinent en perspective.

Ajoute un carrousel « Coverflow » (aussi appelé cover flow carousel) sur [où].
L’élément central doit faire face tandis que ceux de chaque côté se tournent en perspective ; glisser latéralement fait défiler la rangée et, au relâchement, elle se cale en douceur sur l’élément le plus proche.
Prends en charge les flèches du clavier et le balayage en plus du glisser, et garde le défilement vertical de la page sur les écrans tactiles.

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 nouvelle page glisse d’un côté pendant que l’ancienne sort, la direction suivant la profondeur de navigation.

Ajoute une « Slide Page Transition » (aussi appelée push / pop ou directional slide) sur [où].
En avançant, la nouvelle page doit entrer en poussant depuis le côté pendant que l’ancienne sort de l’autre ; en revenant, les deux doivent aller dans le sens inverse : fluide, avec une accélération et une décélération douces.
Lie la direction à la profondeur de navigation, y compris le bouton Retour du navigateur, et empêche la page de défiler latéralement pendant le glissement.

Une carte s’agrandit jusqu’à devenir une vue de détail complète, en gardant un seul conteneur visible qui change de forme et révèle un nouveau contenu.

Ajoute une transition « Container Transform » (aussi appelée card expand to detail ou expandable card) sur [où].
À l’ouverture de la carte, le même conteneur doit s’agrandir en douceur jusqu’à la vue de détail complète, son ancien contenu disparaissant vite et le nouveau apparaissant en fondu une fois l’agrandissement presque terminé ; la fermeture joue l’inverse.
Garde un seul conteneur continu plutôt qu’un fondu entre deux boîtes séparées, et place le focus dans la vue de détail à l’ouverture.

Quand on fait glisser un élément, les autres s’écartent et se replacent dans le nouvel ordre.

Ajoute une « Drag-to-Reorder List » (aussi appelée sortable list) sur [où].
L’élément déplacé doit suivre directement le pointeur et se soulever légèrement, pendant que les autres s’écartent en douceur ; au relâchement, il doit se caler rapidement dans l’emplacement le plus proche.
Prends en charge le tactile comme la souris, et propose un moyen de déplacer les éléments au clavier, avec la nouvelle position annoncée aux lecteurs d’écran.

Un panneau latéral glisse depuis le bord gauche, droit ou supérieur, en poussant ou en recouvrant le contenu.

Ajoute un « Drawer Slide » (aussi appelé off-canvas ou side sheet) sur [où].
Le panneau doit glisser depuis le bord latéral par-dessus le contenu pendant que la page derrière s’assombrit, vite et en ralentissant en douceur, puis ressortir de la même façon à la fermeture.
Garde le focus clavier dans le tiroir ouvert, ferme-le avec Échap ou un clic sur la zone assombrie, et rends le focus au bouton qui l’a ouvert.