Image Reveal Wipe

Un clip-path ou un masque s’agrandit depuis un bord ou un point et découvre peu à peu l’image ou le texte.

Ajoute un effet d’entrée « Clip Reveal » (aussi appelé mask reveal, wipe reveal ou image reveal) sur [où].
Un bord de découpe doit balayer de gauche à droite pour découvrir progressivement le contenu, qui reste immobile : fluide, avec un début et une fin en douceur.
Réserve l’espace de l’élément dès le départ pour que rien ne se décale, et affiche-le entièrement découvert si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Une forme de masque balaie la surface ou suit le pointeur pour dévoiler le contenu en dessous.

Ajoute un effet de survol « SVG Mask Reveal » (aussi appelé clip-path reveal ou spotlight mask) sur [où].
Pendant le survol, un masque circulaire doit s’agrandir depuis le centre et dévoiler le contenu en dessous, puis se refermer quand le pointeur s’en va : fluide et assez rapide.
Garde les deux calques exactement à la même taille pour que rien ne bouge, et montre le même dévoilement au focus clavier et au toucher.

Un séparateur déplaçable révèle une image d’un côté et une autre de l’autre.

Ajoute un comparateur avant/après (Before-After Slider), aussi appelé image comparison slider ou compare slider, sur [où].
Deux images sont superposées, et faire glisser un séparateur vertical dévoile davantage l’une et moins l’autre ; le séparateur suit directement le pointeur, sans retard.
Place le séparateur au milieu au départ, et fais-le fonctionner au toucher et avec les flèches du clavier.

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

Une image fixe zoome et se déplace lentement dans son cadre.

Ajoute un « Ken Burns Effect » (aussi appelé slow pan and zoom) sur [où].
Pendant qu’elle est affichée, chaque image doit zoomer et glisser très lentement dans une seule direction, puis passer en fondu enchaîné à l’image suivante, qui se déplace dans une autre direction : calme et continu.
Fais en sorte que chaque image couvre tout son cadre à tout moment pour qu’aucun bord n’apparaisse, et garde les images immobiles si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Une miniature s’agrandit depuis sa place jusqu’à une grande vue centrée sur un fond assombri.

Ajoute un « Lightbox Zoom » (aussi appelé image zoom overlay ou Medium-style zoom) sur [où].
Un clic sur une miniature doit la faire grandir en douceur depuis sa place jusqu’à une grande vue centrée pendant que la page derrière s’estompe, et la fermeture doit la faire rétrécir jusqu’à la même place.
Ferme-la avec Échap ou un clic sur le fond, place le focus dans la vue tant qu’elle est ouverte et rends-le à la miniature ensuite.

Une loupe ronde suit le pointeur et montre une zone agrandie de l’image.

Ajoute une loupe (Magnifier Lens), aussi appelée lens ou loupe, sur [où].
Une lentille ronde doit se placer juste sous le pointeur, sans retard, et montrer agrandie la partie de l’image qui se trouve dessous.
Garde la vue agrandie alignée sur le point exact sous le pointeur et, sur les écrans tactiles, affiche la loupe tant que le doigt reste posé sur l’image.