Ken Burns Effect

Une image s’agrandit dans son cadre au survol, parfois en se déplaçant avec le pointeur.

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.

Un élément ou une scène s’agrandit ou rétrécit au fil du défilement.

Ajoute un effet « Zoom on Scroll » (aussi appelé scroll zoom ou scale on scroll) sur [où].
Tant que la section reste à l’écran, l’élément doit grandir en douceur d’une petite carte jusqu’à remplir toute la vue, au rythme du défilement, puis rétrécir quand on remonte.
Mets-le à l’échelle sans décaler la mise en page autour, et affiche-le à sa taille finale sans zoom si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Des calques se déplacent à des vitesses différentes au défilement pour créer une impression de profondeur.

Ajoute un effet de parallaxe (Parallax) au défilement sur [où], aussi appelé parallax scrolling ou parallax layers.
Les calques d’arrière-plan doivent se déplacer plus lentement que le contenu pendant le défilement, le plus éloigné bougeant le moins, pour une impression de profondeur discrète.
Garde-le lié à la position de défilement sans décalage, laisse le texte sur le calque à vitesse normale, et désactive l’effet 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.

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.