Preloader Curtain Lift

Des panneaux pleins balaient l’écran pour couvrir l’ancienne page, puis se retirent pour révéler la nouvelle.

Ajoute une transition de page « Curtain / Panel Wipe » (aussi appelée page wipe ou staggered panels) sur [où].
Des panneaux pleins doivent balayer l’écran l’un après l’autre pour couvrir l’ancienne page, la page doit changer pendant qu’elle est entièrement couverte, puis les panneaux doivent continuer hors de vue pour révéler la nouvelle : franc et fluide.
N’affiche jamais la nouvelle page avant que les panneaux aient couvert l’ancienne, et utilise un simple fondu si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Un nombre défile d’une valeur de départ jusqu’à une valeur cible quand il devient visible.

Ajoute un compteur animé (Number Ticker) sur [où] : aussi appelé count up ou animated counter.
Quand le nombre entre à l’écran, il doit compter de zéro jusqu’à sa cible, vite au début puis en ralentissant doucement à l’arrivée.
Utilise des chiffres à chasse fixe pour que rien ne tremble autour, compte une seule fois, et donne directement la valeur finale aux lecteurs d’écran et si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

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

Les contenus sortant et entrant se déplacent ensemble le long de l’axe X, Y ou Z avec des fondus pour montrer leur relation spatiale.

Ajoute une transition de page « Shared Axis » (aussi appelée shared axis X/Y/Z) sur [où].
En avançant, l’ancien contenu doit glisser un peu d’un côté et disparaître vite en fondu pendant que le nouveau arrive de l’autre côté et apparaît juste après ; en revenant, la direction s’inverse.
Garde un déplacement court pour qu’il ne fasse que suggérer la direction, et adapte l’axe à la navigation : latéral pour les pages sœurs, vertical pour les étapes, profondeur pour l’exploration.

Un élément correspondant, comme une miniature, se transforme en position et en taille d’une page à l’autre.

Ajoute une « Shared Element Transition » (aussi appelée hero transition ou view-transition-name morph) sur [où].
En passant à la page suivante, l’élément correspondant, comme une miniature, doit se déplacer et grandir en douceur jusqu’à sa place sur la nouvelle page pendant que le reste du contenu passe en fondu enchaîné, puis rétrécir au retour.
Donne aux éléments correspondants des deux pages une même identité partagée pour qu’ils s’associent correctement, et rabats-toi sur un simple fondu enchaîné quand le navigateur ne peut pas les transformer.

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.