Card Stack

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.

Glisser une ligne de liste sur le côté révèle des boutons d’action comme supprimer ou archiver.

Ajoute une interaction « Swipe to Delete » (aussi appelée swipe actions ou swipe to reveal) sur [où].
Quand on fait glisser une ligne sur le côté, elle doit suivre directement le doigt pour découvrir derrière elle des boutons d’action comme archiver et supprimer, s’arrêter une fois qu’ils sont entièrement visibles, et au relâchement glisser en douceur à sa place, sans rebond.
Garde le défilement vertical fonctionnel pendant le glissement horizontal, et rends les mêmes actions accessibles au clavier et aux lecteurs d’écran sans glisser.

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.

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 contenu est placé sur les faces d’un cube qui pivote pour montrer la face suivante.

Ajoute une transition « Cube Rotate » (aussi appelée 3D cube ou cube transition) sur [où].
Place le contenu sur les faces latérales d’un cube vu en perspective ; chaque appui sur suivant doit faire tourner le cube en douceur autour de son axe vertical pour amener la face suivante devant.
Ne rends que la face avant accessible au clavier et aux lecteurs d’écran, et utilise un simple fondu si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Un reflet lumineux suit le pointeur sur la surface d’une carte, comme une réflexion.

Ajoute un effet « Glare / Holographic Card » (aussi appelé glare card ou glare hover) sur [où].
Un reflet doux et lumineux doit suivre le pointeur sur la surface de la carte, comme de la lumière qui s’y reflète, pendant que la carte s’incline légèrement vers lui ; les deux s’estompent quand il sort : fluide et discret.
Laisse les clics traverser la couche du reflet, garde le contenu lisible en dessous et affiche la carte sans reflet sur les écrans tactiles.