Zoom Transition
On entre dans le contenu : la vue d'ensemble grossit jusqu'à × 2,5 en s'effaçant pendant que le détail arrive de × 0,3 à × 1, les deux contenus changeant d'échelle en même temps sur 0,7 s. CSS + 0,9 Ko de JavaScript, clic, Entrée ou Espace, simple fondu sur place si l'utilisateur réduit les animations.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Transitions comprend 52 effets, dont 9 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
Le cadre .zmt-frame (280 × 180 px, coins de 16 px, overflow: hidden) superpose deux états .zmt-state en inset: 0, avec la même transition de 0,7 s en cubic-bezier(.4, 0, .2, 1) sur l'opacité et l'échelle. La vue d'ensemble A (grille de six vignettes sur fond ardoise) est à scale(1), opaque. Le détail B (dégradé violet, titre « ZOOM ») attend réduit au tiers et transparent : opacity: 0; transform: scale(.3).
Au basculement de .active, A part à opacity: 0; scale(2.5) et B arrive à opacity: 1; scale(1). Les deux contenus grandissent ensemble : A semble foncer vers l'œil et se dissoudre, B sort du fond pour prendre sa place — le zoom avant d'une carte ou d'une galerie. Mesuré dans Chromium 151 : 250 ms après le clic, A est à × 1,73 et 0,51 d'opacité, B à × 0,64 et 0,49 (Firefox 153 : × 1,69 / 0,54 et × 0,62 / 0,46) ; à 1,1 s, A à × 2,5 (700 px de large, coupé par le cadre) et transparent, B à × 1 et opaque, état stable lors d'une dernière lecture 3 s plus tard. Le second clic fait le zoom arrière. Même résultat dans WebKit 26.5.
L'agrandissement part du centre de A (transform-origin par défaut). Placer ce point sur la zone cliquée change le récit : on n'entre plus « au milieu » mais dans la tribune, la parcelle ou la photo choisie ; la FAQ donne la ligne à ajouter. Côté script, quelques lignes par .zmt-frame : bascule de .active (souris, Entrée, Espace), mise à jour d'aria-pressed et d'aria-hidden ; tout est préfixé zmt-.
Accessibilité
- Mouvement réduit : sous
prefers-reduced-motion: reduce, les deux états restent à l'échelle 1 (transform: none) et seul un fondu de 0,15 s subsiste (mesuré dans Chromium et Firefox : aucune mise à l'échelle, passage terminé en moins de 260 ms). Un zoom qui fonce vers l'œil est l'un des mouvements les plus inconfortables pour les personnes sensibles. - Clavier et lecteurs d'écran : le cadre se comporte en bouton bascule (Entrée, Espace,
aria-pressed) et l'état caché n'est pas lu, comme dans Slide Transition (fx-0696). - Retour visible : dans une vraie interface, ajoutez un bouton « Retour au plan » dans l'état B ; on ne devine pas toujours qu'un second clic sur le détail ramène la vue d'ensemble.
- Texte pendant le zoom : agrandi × 2,5 et à demi transparent, le texte de A devient illisible et flou de mouvement ; ne mettez rien dans A qu'il faudrait lire pendant le passage.
Compatibilité navigateur
CSS (transform: scale(), opacity, transition, inset) + 0,9 Ko de JavaScript, aucune dépendance. Mesuré dans Chromium 151, Firefox 153 et WebKit 26.5 : zoom avant, état B tenu, zoom arrière au second clic ; clavier et mouvement réduit mesurés dans Chromium et Firefox. Échelle et opacité sont animées par le compositeur, sans recalcul de mise en page ; à × 2,5, le texte de A est rendu agrandi et peut paraître légèrement flou pendant le passage, c'est normal. inset fixe le plancher (Chrome 87, Firefox 66, Safari 14.1).
Sans JavaScript, la vue d'ensemble reste affichée. Sans inset, écrivez top: 0; right: 0; bottom: 0; left: 0 sur .zmt-state.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec Premium) :
<div class="zmt-stage">
<div class="zmt-frame" role="button" tabindex="0" aria-pressed="false">
<div class="zmt-state zmt-state-a">
<div class="zmt-grid" aria-hidden="true">…</div>
<span class="zmt-label">…</span>
</div>
<div class="zmt-state zmt-state-b" aria-hidden="true">…</div>
</div>
<span class="zmt-hint">…</span>
</div>Le code complet HTML + CSS + JS de Zoom Transition, prêt à coller — et les 840 effets. Ou 299 € TTC une fois, accès à vie.
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
Point de zoom (CSS — transform-origin de .zmt-state-a) |
centre (50 % 50 %) | Placez-le sur la zone d'où l'on entre : 86% 50% pour un élément à droite. Pour le placer au clic sous le pointeur, ajoutez au script la ligne donnée dans la FAQ. |
Force du zoom (CSS — scale(2.5) et scale(.3)) |
A jusqu'à × 2,5, B depuis × 0,3 | × 1,6 et × 0,7 pour une transition douce entre deux écrans proches ; × 4 et × 0,1 pour une vraie plongée dans un plan. |
Durée et courbe (CSS — transition de .zmt-state) |
0,7 s, cubic-bezier(.4, 0, .2, 1) |
0,5 s pour une galerie ; une courbe en ease-in sur A et ease-out sur B accentue l'impression de traverser. |
Contenus (HTML — .zmt-state-a, -b) |
grille de vignettes et titre « ZOOM » | A est la vue d'ensemble (plan, grille, photo de groupe), B le détail. Fond opaque sur les deux pour éviter de voir l'un à travers l'autre. |
Taille du cadre (CSS — .zmt-frame) |
280 × 180 px | Le cadre coupe A quand il grossit ; agrandissez-le librement, les échelles sont relatives. |
FAQ
.active, calculez la position du clic dans le cadre et écrivez-la sur A : var r = frame.getBoundingClientRect(); a.style.transformOrigin = ((e.clientX - r.left) / r.width * 100) + '% ' + ((e.clientY - r.top) / r.height * 100) + '%';. Le zoom avant file alors vers ce point, et le zoom arrière en repart.background: url(…) center / cover) ou en <img> qui remplit l'état. À × 2,5 elle sera affichée agrandie pendant 0,7 s ; une image de 2,5 fois la taille du cadre reste nette pendant le passage.
