Carousel Crossfade
Aussi appelée Fade slideshow, Carousel fade
Les diapositives restent en place et se fondent l’une dans l’autre au lieu de glisser.
Usages
Diaporamas de hero, témoignages
Prompt
Remplacez [où] par la partie de votre page, puis collez le prompt dans votre agent IA. Chaque prompt contient le nom de l’animation : la prochaine fois, il vous suffira de la demander par son nom.
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).Animations similaires
A
B
Cliquez
Crossfade Page Transition (fondu enchaîné)
Aussi appelée Cross-dissolve, Fade transition, Root cross-fade, Cross-Document View Transition, MPA view transition, @view-transition navigation auto
L’ancienne page disparaît en fondu pendant que la nouvelle apparaît en fondu au même endroit.
Usages
Changement de route par défaut
Ajoute un fondu enchaîné entre les pages (« Crossfade Page Transition », aussi appelé cross-dissolve ou fade transition) sur [où].
À la navigation, l’ancienne page doit disparaître en fondu pendant que la nouvelle apparaît en même temps au même endroit : doux et assez rapide.
Garde les deux pages au même emplacement pour que rien ne bouge pendant le fondu, et place le focus sur le titre principal de la nouvelle page après le changement.A
B
C
Cliquez
Carousel Slide (carrousel)
Aussi appelée Slider, Swipe carousel, Scroll-snap carousel
Les diapositives défilent horizontalement dans une fenêtre visible et s’aimantent une à une en place.
Usages
Bannières de hero, galeries de produits
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.A
B
Cliquez
Fade Through
Aussi appelée Fade-through transition, Out-In Route Transition, Wait mode, mode="wait", mode="out-in"
Le contenu sortant disparaît complètement en fondu, puis le contenu entrant apparaît en fondu avec un léger agrandissement.
Usages
Passage entre des destinations sans lien entre elles
Ajoute une transition de page « Fade Through » (aussi appelée fade-through transition ou out-in route transition) sur [où].
Le contenu sortant doit d’abord disparaître en fondu, vite et complètement, puis le contenu entrant doit apparaître en fondu en s’agrandissant légèrement jusqu’à sa place.
Ne laisse jamais les deux se chevaucher, et empêche la mise en page du contenu entrant de bouger pendant qu’il s’agrandit.ABCDE
Faites glisser
Coverflow
Aussi appelée Cover flow carousel
L’élément central fait face tandis que les éléments latéraux s’inclinent en perspective.
Usages
Carrousels d’albums et de médias
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.Autres animations : Component & Layout
BC
A
A
Cliquez
Container Transform
Aussi appelée Card expand to detail, Expandable card, Morph card to page
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.
Usages
D’une carte de liste au détail, d’un FAB à un panneau
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.- A
- B
- C
- D
Faites glisser
Drag-to-Reorder List
Aussi appelée Reorder, Sortable list
Quand on fait glisser un élément, les autres s’écartent et se replacent dans le nouvel ordre.
Usages
Kanban, réglages triables, playlists
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.