Scale Morph
Un même élément change de taille, d'arrondi et de couleur — carré de 100 px vers pilule de 220 × 60 — sur une courbe à dépassement qui le fait monter à 232 px avant de se poser : c'est le composant qui se transforme, pas un échange de contenus. CSS + 0,6 Ko de JavaScript, taille finale directe 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 .scm-frame (280 × 200 px) centre une seule forme, .scm-shape : 100 × 100 px, coins de 20 px, dégradé ambre vers orange, ombre ambrée. Elle porte transition: .7s cubic-bezier(.34, 1.56, .64, 1) sur toutes ses propriétés. Au basculement de .active, elle passe à 220 × 60 px, coins de 30 px, ombre bleue. La deuxième valeur de la courbe (1,56) dépasse 1 : la forme va plus loin que sa taille finale, puis revient. Mesuré toutes les 80 ms après le clic dans Chromium 151 : 151, 192, 217, 229, 232, 229, 225, 221 puis 220 px de large ; même pointe à 232 px dans Firefox 153 et même arrivée dans WebKit 26.5.
Un dégradé CSS ne s'anime pas : passer d'un linear-gradient à un autre change la couleur d'un coup. La couleur d'arrivée vit donc sur un calque ::before de la forme (dégradé cyan vers bleu, z-index: -1 dans une forme en isolation: isolate, donc sous le texte), dont l'opacité monte de 0 à 1 en 0,7 s avec une courbe sans dépassement. Relevé dans Chromium : 0,11 à 80 ms, 0,35 à 160 ms, 0,60 à 240 ms, 1 à 640 ms. La forme change ainsi de couleur pendant qu'elle grandit, au lieu de sauter au bleu dès la première image.
Sous la forme, deux points indiquent l'état : le premier est allumé en A, le second en B (règles .scm-frame:not(.active) .scm-dot:first-child et .scm-frame.active .scm-dot:last-child, sans id ni script). Le script pose ou retire .active au clic, à Entrée ou à Espace sur chaque .scm-frame de la page et tient aria-pressed à jour ; l'état B reste jusqu'au clic suivant, qui fait rétrécir la forme avec le même rebond. Tout est préfixé scm-, rien n'est exposé sur window.
Accessibilité
- Mouvement réduit : sous
prefers-reduced-motion: reduce, la forme prend sa taille d'arrivée sans transition ni rebond (mesuré à 60 ms : 220 px dans Chromium et Firefox) ; seule la couleur passe en 0,15 s. - Clavier et lecteurs d'écran : le cadre porte
role="button",tabindex="0"etaria-pressed; Entrée et Espace basculent comme un clic (mesuré). Le nom lu est le texte de la forme ; si vous changez son libellé entre A et B (« Dicter » / « Enregistrement »),aria-presseddit déjà l'état, gardez un libellé stable ou mettez unaria-labelexplicite. - Le rebond attire l'œil : c'est son rôle (confirmer l'appui, signaler une alerte). Ne l'utilisez pas sur un élément qui change souvent tout seul, il distrairait de la lecture.
- Contraste : texte blanc sur ambre ou orange vif, vérifiez le contraste de vos couleurs à la taille de texte choisie ; le gras de 0,85 rem de la démo est à la limite sur l'ambre clair.
Compatibilité navigateur
CSS (transition de width, height, border-radius et box-shadow, pseudo-élément ::before, isolation, inset) + 0,6 Ko de JavaScript, aucune dépendance. Mesuré dans Chromium 151, Firefox 153 et WebKit 26.5 : rebond à 232 px, arrivée à 220, retour au second clic ; montée de la couleur, points, clavier et mouvement réduit mesurés dans Chromium et Firefox. Animer width et height recalcule la mise en page à chaque image : sans conséquence pour un bouton isolé, à éviter sur des dizaines d'éléments à la fois.
Sans JavaScript, la forme reste carrée. Sans inset (navigateurs antérieurs à Chrome 87, Firefox 66, Safari 14.1), le calque de couleur ne couvre pas la forme : écrivez top: 0; right: 0; bottom: 0; left: 0 sur .scm-shape::before.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec Premium) :
<div class="scm-stage">
<div class="scm-frame" role="button" tabindex="0" aria-pressed="false">
<div class="scm-shape">
<span class="scm-label">MORPH</span>
</div>
<div class="scm-dots" aria-hidden="true">
<span class="scm-dot"></span>
<span class="scm-dot"></span>
</div>
</div>
<span class="scm-hint">…</span>
</div>Le code complet HTML + CSS + JS de Scale Morph, 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 |
|---|---|---|
Tailles A et B (CSS — .scm-shape et .scm-frame.active .scm-shape) |
100 × 100 px → 220 × 60 px | Réglez la largeur d'arrivée sur votre libellé le plus long plus 40 px de marge ; le rebond ajoute environ 5 % pendant 0,2 s, laissez cette place autour. |
Rebond (CSS — cubic-bezier(.34, 1.56, .64, 1)) |
1,56 : environ 12 px de dépassement sur 120 px de course | 1,3 pour un rebond discret, 1,8 pour un effet élastique ; cubic-bezier(.4, 0, .2, 1) supprime le rebond. |
Couleurs (CSS — background de .scm-shape et de ::before) |
ambre/orange → cyan/bleu | La couleur de départ est le fond de la forme, celle d'arrivée le fond du ::before ; tout dégradé convient, le fondu passe par l'opacité. |
Durée (CSS — transition) |
0,7 s pour la forme et la couleur | 0,45 s pour un bouton qui doit répondre vite ; gardez la même durée sur la forme et sur ::before pour que la couleur finisse avec la taille. |
Points d'état (HTML/CSS — .scm-dots) |
deux points sous la forme | Supprimez le bloc si la forme suffit à dire l'état ; ils ne sont qu'indicatifs (aria-hidden). |
FAQ
linear-gradient : la propriété background change d'un coup, à la première image. Superposer le dégradé d'arrivée sur un pseudo-élément et animer son opacité donne un vrai fondu entre les deux dégradés, dans tous les navigateurs. @property permettrait d'animer des couleurs de dégradé déclarées comme variables, mais seulement dans les navigateurs récents ; le calque marche partout.setTimeout qui appelle à nouveau la bascule après 2 à 3 secondes, et annoncez le changement avec une zone aria-live.
