Aussi appelée Image comparison slider, Compare slider
Un séparateur déplaçable révèle une image d’un côté et une autre de l’autre.
Usages
Retouche photo, comparaisons de produits
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.
Aussi appelée Image zoom on hover, Zoom-pan, Ken Burns hover zoom, Zoom effect
Une image s’agrandit dans son cadre au survol, parfois en se déplaçant avec le pointeur.
Usages
Cartes produit, miniatures
Ajoute un zoom au survol (Hover Zoom), aussi appelé image zoom on hover ou zoom-pan, sur [où].
Tant que le pointeur est sur l’image, elle doit s’agrandir lentement et en douceur dans son cadre, qui garde sa taille, puis revenir en douceur quand il sort.
Rogne l’image à son cadre pour que rien ne déborde de la mise en page, et applique le même zoom au focus clavier.
Faites défiler à l’intérieur
Aussi appelée Mask reveal, Clip-path reveal, SVG mask effect, Scroll Image Reveal, Clip-path Reveal on Scroll
Une image se découvre à mesure qu’un cache se rétracte ou que le bord d’un masque s’étend.
Usages
Images éditoriales au défilement
Ajoute un « Image Reveal Wipe » (aussi appelé mask reveal ou clip-path reveal) sur [où].
Quand l’image entre à l’écran au défilement, un cache doit s’effacer depuis un côté et la dévoiler en douceur au rythme du défilement, pour qu’elle soit entièrement visible bien avant de quitter l’écran.
Réserve l’espace de l’image pour que la mise en page ne saute pas, et affiche l’image entièrement dévoilée si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).
Aussi appelée Slow pan and zoom, Ken Burns, Kenburns
Une image fixe zoome et se déplace lentement dans son cadre.
Usages
Diaporamas de hero, arrière-plans
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).
Aussi appelée Image zoom overlay, Medium-style zoom
Une miniature s’agrandit depuis sa place jusqu’à une grande vue centrée sur un fond assombri.
Usages
Galeries d’images, articles
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.
Aussi appelée Lens, Loupe, Lens (Magnifier), Hover zoom lens
Une loupe ronde suit le pointeur et montre une zone agrandie de l’image.
Usages
Images de fiche produit
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.