Gallery Flow Morph
Six tuiles éparpillées qui dérivent et suivent la souris ; un clic transforme la tuile en vue plein cadre, puis Échap la renvoie à sa place.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Galerie comprend 44 effets, dont 6 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
Dans .gfm-scene (format 16/10, 560 px de large au plus), les six boutons .gfm-tile sont placés en pourcentages et montent ou descendent doucement de quelques pixels (animation gfm-drift de 7 s en aller-retour). Quand le pointeur bouge sur la scène, le script pose --px et --py (position de -0,5 à 0,5) et chaque tuile se décale de 14 px au plus dans la direction fixée par ses variables --dx / --dy : une parallaxe légère, différente d'une tuile à l'autre.
Un clic (ou Entrée) sur une tuile ouvre la visionneuse .gfm-viewer : la tuile et la grande image .gfm-hero partagent le temps de la transition un même view-transition-name, et l'API View Transitions anime le passage de l'une à l'autre en 0,45 s. Le titre (data-title) apparaît lettre par lettre sous l'image. ✕, un clic sur le fond sombre ou Échap referment par le même mouvement inversé et rendent le focus à la tuile d'origine. Sans View Transitions, la visionneuse s'ouvre et se ferme en fondu (0,3 s et 0,25 s).
Les tuiles acceptent vos images : une <img> dans la tuile la couvre, et la visionneuse affiche la même image en grand, ou la version désignée par data-full si vous en fournissez une plus lourde. Sans image, le dégradé de la variable --art sert de visuel, comme dans la démo. Chaque .fx-0819-root de la page a sa propre galerie.
Accessibilité
- Tuiles au clavier : ce sont des
<button>nommés par leur texte, avec un contour violet au:focus-visibleet le même léger agrandissement qu'au survol. - Ouverture et fermeture : à l'ouverture, le focus va sur ✕ (« Fermer la vue plein écran ») et les tuiles derrière deviennent
inert; Échap ou ✕ referment et le focus revient sur la tuile cliquée. - Titre lu d'un bloc : les lettres animées sont masquées aux lecteurs d'écran (
aria-hidden) et le titre complet est annoncé par une copie invisible dans la légende enaria-live="polite". - Mouvement réduit : sous
prefers-reduced-motion: reduce, pas de dérive, pas de parallaxe, pas de morph ni de fondu, pas d'apparition lettre par lettre : la visionneuse s'ouvre et se ferme directement. - Pause de la dérive : un bouton rond en bas à gauche (
.gfm-pause, « Mettre la dérive en pause »,aria-pressed="true"quand elle est arrêtée) arrête et relance la dérive au clic, au doigt et au clavier ; elle se met aussi en pause au survol de la galerie et tant que le focus clavier y est. En mouvement réduit, il n'y a pas de dérive et le bouton est masqué. Échap ne ferme que la galerie qui a le focus.
Compatibilité navigateur
document.startViewTransition : Chrome 111, Safari 18, Firefox 144 (d'après MDN) ; ailleurs, fondu CSS. Propriétés translate et scale (Chrome 104, Firefox 72, Safari 14.1) et inert (Chrome 102, Firefox 112, Safari 15.5). Mesuré dans Chromium 151, Firefox 153 et WebKit 26.5 (Playwright) : deux galeries dont la 2e pilotée seule, ouverture au clavier, fermeture par Échap avec retour du focus sur la tuile, mouvement réduit, 390 px sans débordement, 0 erreur.
Sans View Transitions : la visionneuse s'ouvre et se ferme en fondu. Sans JavaScript : les tuiles s'affichent et dérivent, ni le clic ni le bouton pause ne font rien.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0819-root">
<div class="gfm-scene">
<div class="gfm-field">
<button class="gfm-tile" type="button" data-title="…" style="--dx: -1; --dy: -0.6"><img src="…" alt=""><span class="gfm-tile-name">…</span></button>
… (6 tuiles)
</div>
<button class="gfm-pause" type="button" aria-pressed="false" aria-label="…"></button>
<div class="gfm-viewer" hidden>
<figure class="gfm-hero"></figure>
<p class="gfm-caption" aria-live="polite"></p>
<button class="gfm-close" type="button" aria-label="…">✕</button>
</div>
</div>
</div>Paiement unique, sans abonnement — le code est à toi pour toujours
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
Images (HTML — <img> dans .gfm-tile) |
aucune : dégradés --art |
L'image couvre la tuile et s'affiche en grand dans la visionneuse. Laissez alt="" si le nom de la tuile suffit. |
Grande version (HTML — data-full sur .gfm-tile) |
la même image que la tuile | Adresse d'une image plus détaillée chargée seulement à l'ouverture. |
Titre (HTML — data-title) |
Aurora, Magma, Océan… | Texte affiché lettre par lettre sous l'image et lu par les lecteurs d'écran. |
Dérive et parallaxe (HTML — --dx / --dy en style de la tuile) |
de -1,2 à 1,1 selon la tuile | Sens et force du décalage avec la souris (14 px × valeur) et décalage de la dérive. |
Bouton pause (HTML — .gfm-pause) |
affiché en bas à gauche, aria-pressed="false" |
Arrête ou relance la dérive ; changez son aria-label si vous traduisez. Ne le retirez que si vous supprimez aussi la dérive. |
Largeur maximale (CSS — --gfm-max-width) |
560px | La scène prend la largeur de son conteneur jusqu'à cette limite ; none pour toute la largeur. |
Durée du morph (CSS — ::view-transition-old/new(gfm-active)) |
.45s | Vitesse du passage tuile → plein cadre. |
Position des tuiles (CSS — .gfm-tile:nth-child(n)) |
6 positions en % | Coordonnées left / top et largeur de chaque tuile ; à adapter si vous en mettez plus ou moins. |
FAQ
.gfm-tile:nth-child(1) à (6)). Une 7e tuile s'afficherait en haut à gauche par-dessus la première : ajoutez une règle :nth-child(7) avec sa place.gfm-paused sur .gfm-scene), le survol et le focus clavier la mettent aussi en pause, et elle disparaît en mouvement réduit. Pour la supprimer partout, retirez la ligne animation: gfm-drift … de .gfm-tile et le bouton .gfm-pause : la parallaxe à la souris reste.
