Fluid Grid Morph
Grille de tuiles qui passe de 1 à 2 puis 3 colonnes selon la largeur de son conteneur ; à chaque changement, les tuiles glissent de leur ancienne case vers la nouvelle.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Utilitaires comprend 43 effets, dont 3 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
La disposition est du CSS pur : .fx-0758-root est un conteneur (container: fgm / inline-size) et .fgm-grid compte 1 colonne, puis 2 dès 280 px et 3 dès 440 px de largeur de racine. Le navigateur ne sait pas animer un changement du nombre de colonnes : sans aide, les tuiles sauteraient d'un coup.
Le script fait cette animation avec la technique FLIP. Un ResizeObserver par racine note la position de chaque tuile (offsetLeft, offsetTop). Quand le nombre de colonnes change, il replace chaque tuile à son ancienne position avec un transform, puis ajoute la classe .fgm-move et retire ce décalage : la transition CSS de 0,4 s (cubic-bezier(.4, 0, .2, 1)) ramène la tuile dans sa nouvelle case.
Si une nouvelle bascule arrive pendant un glissement, la tuile repart de l'endroit où elle est affichée. Entre deux paliers, les tuiles s'étirent avec la grille sans animation. Chaque racine a sa propre instance (attribut data-fgm-ready) : coller le code deux fois n'en crée pas une seconde.
Accessibilité
- Mouvement réduit : avec
prefers-reduced-motion: reduce, le script ne décale rien et le CSS coupe la transition ; la grille change de colonnes instantanément, rien n'est perdu. - Ordre conservé : seul l'affichage glisse, l'ordre du HTML ne change jamais ; le lecteur d'écran lit les tuiles dans le même ordre à toutes les largeurs, et la touche Tab suit cet ordre pour les liens ou boutons que vous y placez.
- Contenu libre : les tuiles sont des
<div>; mettez-y de vrais liens ou boutons si elles s'activent (la scène du CRM utilise un<button>par fichier). - Lettres de démonstration : les tuiles A à F sont du texte blanc sur fonds teintés à 15 % ; remplacez-les par votre contenu en gardant un contraste suffisant.
Compatibilité navigateur
@container (Chrome 105, Firefox 110, Safari 16), ResizeObserver (Chrome 64, Firefox 69, Safari 13.1) et DOMMatrixReadOnly d'après @mdn/browser-compat-data 8.1.8. Mesuré dans Chromium 151, Firefox 153 et WebKit 26.5 : passage de 2 à 3 colonnes, les 6 tuiles de la copie redimensionnée sont en mouvement à 30 et 150 ms puis posées à 700 ms ; la copie voisine ne bouge pas ; en mouvement réduit, aucune tuile ne glisse.
Sans JavaScript ou sans ResizeObserver, la grille change toujours de colonnes mais d'un coup, sans glissement. Sans @container, elle reste sur une colonne.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0758-root">
<div class="fgm-grid">
<div class="fgm-item">A</div>
<div class="fgm-item">B</div>
<!-- … autant de tuiles que voulu -->
</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 |
|---|---|---|
Paliers (CSS — @container fgm (min-width: 280px) et (min-width: 440px)) |
2 colonnes à 280 px, 3 colonnes à 440 px | Ajoutez un palier à 4 colonnes (repeat(4, 1fr) à 620 px par exemple) : le script détecte tout changement du nombre de colonnes, rien à modifier côté JS. |
Durée et courbe du glissement (CSS — .fgm-item.fgm-move { transition }) |
transform .4s cubic-bezier(.4, 0, .2, 1) |
0,25 s donne un rangement plus sec ; au-delà de 0,6 s, une bascule pendant un glisser au doigt paraît en retard. |
Hauteur des tuiles (CSS — .fgm-item { height }) |
60 px | Montez à 70-90 px pour des vignettes ; supprimez la hauteur pour qu'elle suive le contenu (le glissement fonctionne aussi avec des hauteurs différentes). |
Couleurs des tuiles (CSS — .fgm-item:nth-child(6n+1) … (6n)) |
Six teintes à 15 % d'opacité, cycle de 6 | Remplacez par une seule couleur ou par vos images : le cycle reprend à la septième tuile. |
Espacement (CSS — .fgm-grid { gap; padding }) |
8 px entre tuiles, 10 px autour | Un espace plus large rend le glissement plus lisible ; pour une grille collée à son cadre, mettez padding: 0. |
Nombre de tuiles (HTML — enfants de .fgm-grid) |
6 (A à F) | Ajoutez ou retirez des tuiles avant le chargement du script ; une tuile ajoutée plus tard peut se placer sans glisser à la première bascule, puis glisse comme les autres. |
FAQ
transform: translate), sans la redimensionner, donc sans déformer les images.
