View Transitions Page Reveal
La vraie API du navigateur, dans une seule page : document.startViewTransition() photographie la grille puis la vue détail, et la vignette touchée grandit jusqu'à devenir le grand visuel en 0,55 s ; le retour la ramène dans sa tuile. Un view-transition-name posé juste le temps du passage, 2,5 Ko de JavaScript, affichage instantané si l'API manque ou 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 .vt-demo (format 16/11, coins de 14 px, fond #0d0d18) contient deux vues : la grille .vt-list de six tuiles en 3 colonnes, et la vue détail .vt-detail, masquée (display: none) tant qu'aucune tuile n'est ouverte. Chaque tuile est un button : une vignette .vt-thumb dont le fond porte l'image ou le dégradé, un libellé sur bandeau noir à 35 % flouté, et le texte de la fiche dans l'attribut data-text. Tout le contenu vient du HTML : pour vos produits, vous écrivez vos tuiles, le script n'en crée aucune.
Au clic, le script recopie le fond de la vignette (couleur, image, taille, position) et son libellé dans le grand visuel .vt-hero, puis pose view-transition-name: vt-hero sur la vignette ET sur le grand visuel. Les deux ne sont jamais affichés en même temps : dans l'état avant, seule la vignette est rendue, dans l'état après, seul le grand visuel. document.startViewTransition() photographie la page, exécute l'échange (grille masquée, détail affiché, focus sur « ← Retour »), photographie la nouvelle page, puis anime : le groupe vt-hero passe de la taille et de la place de la vignette à celles du grand visuel, pendant que le reste de la page passe en fondu enchaîné. Une règle ::view-transition-group(vt-hero) fixe ce morph à 0,55 s sur cubic-bezier(.4, 0, .2, 1) ; le fondu du reste garde la durée par défaut, 0,25 s. Les noms sont retirés à la fin (t.finished).
Le retour fait la même chose dans l'autre sens : le nom est reposé sur le grand visuel et sur la vignette de la tuile ouverte, et le visuel rétrécit jusqu'à sa tuile, qui reprend le focus. Mesuré dans Chromium 151, Firefox 153 et WebKit 26.5 : les six tuiles ouvrent leur fiche, l'aller et le retour lancent tous deux un groupe vt-hero de 550 ms. Les pseudo-éléments ::view-transition-* vivent sur la racine du document : une variable CSS posée sur .vt-demo ne les atteint pas, d'où la règle écrite à la racine. Plusieurs grilles peuvent vivre dans la page, chacune avec son propre état ; une seule transition de vue tourne à la fois dans un document.
Accessibilité
- Focus : à l'ouverture, le focus passe sur « ← Retour » ; au retour, il revient sur la tuile ouverte — mesuré dans les trois moteurs. Au clavier : Tab jusqu'à la tuile, Entrée pour l'ouvrir, puis Entrée à nouveau (le focus est déjà sur « ← Retour ») pour revenir à la même place dans la grille — mesuré dans Chromium et Firefox, et dans WebKit avec Option+Tab, Safari sur Mac ne s'arrêtant sur les boutons qu'avec cette touche ou le réglage clavier correspondant.
- Mouvement réduit : sous
prefers-reduced-motion, le script n'appelle pas l'API et échange les vues d'un coup — mesuré dans Chromium : aucune animation, détail affiché dès le clic. - Vue masquée, vue absente : la vue qui n'est pas affichée est en
display: none, donc ni lue ni atteignable au clavier. Le titre du grand visuel n'est qu'un texte : dans une vraie page, mettez-le dans unh2pour qu'un lecteur d'écran sache qu'il a changé de vue. - Contraste : libellés des tuiles en blanc sur bandeau sombre, 19,3:1 ; texte de la fiche
#a1a1aasur#0d0d18, 7,5:1. Le titre blanc posé sur le grand visuel dépend de l'image : 5,9:1 sur le violet#7b2ff7, mais 1,5 à 2,2:1 sur les extrémités claires (vert menthe, cyan, corail) ; ajoutez un dégradé sombre en bas du visuel ou une ombre portée au texte.
Compatibilité navigateur
API View Transitions dans un même document (document.startViewTransition, view-transition-name, ::view-transition-group) et une soixantaine de lignes de JavaScript, aucune dépendance. Mesuré dans Chromium 151, Firefox 153 et WebKit 26.5 : l'API est présente dans les trois, morph de 550 ms à l'aller et au retour, fondu de 250 ms du reste. Sans l'API (mesuré dans Chromium en la retirant), les vues s'échangent instantanément et le focus suit de la même façon. Support public : Chrome et Edge 111, Safari 18, Firefox 144.
Sans l'API View Transitions ou sous mouvement réduit, la vue détail remplace la grille d'un coup, avec le même contenu et le même focus. Sans JavaScript, seule la grille s'affiche et les tuiles ne s'ouvrent pas : faites de chaque tuile un lien vers une vraie page si le détail doit rester accessible.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec Premium) :
<div class="vt-root">
<div class="vt-demo">
<div class="vt-list">
<div class="vt-grid">
<button class="vt-tile" type="button" data-text="…">
<span class="vt-thumb" style="background: …;"></span>
<span class="vt-tile-label">Aurora</span>
</button>
… (6 tuiles)
</div>
</div>
<div class="vt-detail">
<div class="vt-hero"></div>
<div class="vt-detail-body">
<p class="vt-detail-text"></p>
<button class="vt-back" type="button">← Retour</button>
</div>
</div>
</div>
</div>Le code complet HTML + CSS + JS de View Transitions Page Reveal, 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 |
|---|---|---|
Durée et courbe du morph (CSS — ::view-transition-group(vt-hero)) |
0,55 s, cubic-bezier(.4, 0, .2, 1) |
0,35 s pour une interface vive, 0,8 s pour une galerie. La règle doit rester à la racine de la feuille de style, pas sous .vt-demo. |
Fondu du reste de la page (CSS — ::view-transition-old(root), ::view-transition-new(root)) |
fondu enchaîné du navigateur, 0,25 s | ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .4s; } l'aligne sur le morph ; animation: none fait apparaître le détail d'un coup autour du visuel qui grandit. |
Contenu des tuiles (HTML — .vt-thumb, .vt-tile-label, data-text) |
6 dégradés, un texte par tuile | Mettez une photo en background-image de la vignette : le grand visuel la reprend (taille et position comprises). Pour une fiche plus riche que data-text, remplissez la vue détail depuis un template par tuile. |
Grille (CSS — .vt-grid) |
3 colonnes, 12 px d'écart | repeat(auto-fill, minmax(140px, 1fr)) s'adapte à la largeur ; le morph suit, puisqu'il part de la place réelle de la vignette. |
Hauteur du grand visuel (CSS — .vt-hero height) |
56 % de la vue détail | Plus il est grand, plus le morph est spectaculaire ; gardez la place pour le texte et le bouton de retour sans défilement. |
Nom de transition (JS — 'vt-hero') |
vt-hero |
Il doit être unique dans le document pendant le passage : si une autre transition de vue de la page utilise déjà ce nom, changez-le ici et dans la règle CSS. |
FAQ
transform, entre deux positions écrites dans la feuille de style : l'élément ne change jamais de place dans le DOM, et cela marche partout. View Transitions Page Reveal laisse le navigateur faire le travail : le DOM change vraiment (la grille disparaît, la fiche apparaît), l'API photographie les deux états et interpole la vignette vers le grand visuel, quelles que soient leurs tailles et leurs positions. Prenez Shared Element pour un objet qui glisse entre deux emplacements connus, Page Reveal pour un passage liste → détail.typeof document.startViewTransition : sans l'API, il fait l'échange directement, et la fiche remplace la grille d'un coup, avec le même contenu et le même focus (mesuré en retirant l'API dans Chromium). Rien ne casse ; seul le morph manque. C'est le cas de Firefox avant la version 144 et de Safari avant la version 18.@view-transition { navigation: auto; } dans le CSS des deux pages et le même view-transition-name sur l'élément partagé de chaque page. C'est le principe de Cross-Document Page Morph (fx-0800).
