Morph on Click
Un div morphe sa forme au clic via transition CSS clip-path : cercle, losange, rectangle arrondi, triangle, retour cercle — 5 formes en boucle infinie.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Hover comprend 48 effets, dont 5 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
Le cadre .fx-0376-root contient un élément .mph-shape avec tabindex="0" role="button" et un label descriptif. Le script maintient un index courant par instance (fermeture JavaScript — deux instances sur la même page sont indépendantes). Au chargement, l'index est 0 (cercle) et le clip-path de la forme est celui du cercle.
Au clic (ou keydown Entrée/Espace), l'index est incrémenté modulo 5 et le clip-path est mis à jour. Les 5 formes sont définies comme des valeurs clip-path en CSS : cercle (circle(50%)), losange (polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)), rectangle arrondi (inset + rayon), triangle (polygon(50% 0%, 100% 100%, 0% 100%)). La transition CSS (clip-path 0.5s ease) interpole les polygones : toutes les formes ayant le même nombre de points, le morphing est fluide.
Sous prefers-reduced-motion: reduce, la transition est supprimée (transition: none !important) : les formes changent instantanément au clic. L'effet fonctionnel (changement de forme) est conservé, seule l'animation est désactivée.
Accessibilité
- Clavier : l'élément est focusable par Tab (
tabindex="0") et annoncé comme bouton (role="button"). Les touches Entrée et Espace déclenchent le changement de forme. - Mouvement réduit : sous
prefers-reduced-motion: reduce, le changement de forme est instantané — pas de transition intermédiaire. Le comportement fonctionnel est préservé. - Label de la forme : l'élément porte un
aria-labelstatique (« Forme — cliquez pour transformer »). Pour informer les technologies d'assistance de la forme active, ajoutez unaria-labeldynamique mis à jour à chaque clic : « Cercle — cliquez pour changer de forme ». - Pas d'information encodée visuellement : si la forme active a une signification (cercle = type A, losange = type B…), cette information doit aussi être transmise par du texte visible ou un
aria-labelmis à jour — la forme seule n'est pas suffisante pour les utilisateurs de lecteurs d'écran ou de navigation clavier.
Compatibilité navigateur
CSS clip-path + 1 Ko de JavaScript, aucune dépendance. clip-path: polygon() disponible depuis Chrome 55, Firefox 54 et Safari 10. La transition CSS sur clip-path est disponible depuis Chrome 55, Firefox 72 et Safari 13.1 — sur Firefox 54-71, le changement de forme est instantané (pas de morphing animé). Mesuré dans Chromium 151, Firefox 153 et WebKit 26 : toutes les transitions fluides dans les trois.
Sans JavaScript, l'élément affiche la forme initiale (cercle) sans changer au clic. Sur Firefox 54-71 (hors périmètre courant), clip-path fonctionne mais la transition n'est pas animée : les formes changent instantanément.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0376-root">
<div class="mph-shape" tabindex="0" role="button" aria-label="Forme — cliquez pour transformer">CLICK ME</div>
<span class="mph-label" aria-hidden="true">Cliquez pour transformer</span>
</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 |
|---|---|---|
Formes (CSS — tableaux de clip-path dans le JS) |
cercle, losange, rectangle arrondi, triangle, (retour cercle) — 5 formes | Ajoutez ou retirez des formes dans le tableau JS. Toutes les formes doivent avoir le même nombre de points de polygone pour que le morphing soit fluide ; pour des formes de taille différente, interpolez les points manuellement. |
Durée de la transition (CSS — transition: clip-path 0.5s ease) |
0,5 s | Diminuez à 0,2 s pour un changement vif, augmentez à 1 s pour une transformation lente. |
Couleur de la forme (CSS — background-color de .mph-shape) |
violet (#7c3aed) |
Ajoutez une transition sur background-color et changez la couleur en JS selon l'index pour que chaque forme ait sa propre teinte. |
Taille de la forme (CSS — width et height de .mph-shape) |
120×120 px | Ajustez librement. Pour un aspect non carré (losange allongé, triangle large), adaptez aussi les valeurs de clip-path en conséquence. |
| Déclencheur (JS — événements) | clic + Entrée/Espace au clavier | Pour déclencher la transformation au survol à la place du clic, remplacez click par mouseenter. Pour une rotation automatique, utilisez setInterval. |
FAQ
clip-path dans le tableau JS. Pour que le morphing reste fluide, chaque forme doit avoir le même nombre de points ; convertissez le cercle et le rectangle arrondi en polygones à N points (où N est le nombre de points de vos formes les plus complexes).clip-path: circle(50%) et clip-path: polygon(...) sont des types de valeurs différents ; le navigateur ne peut pas les interpoler directement. Pour animer entre un cercle et un polygone, exprimez le cercle comme un polygone à N points uniformément répartis sur un cercle (clip-path: polygon(50% 0%, 60% 10%, ...)).localStorage : localStorage.setItem('mph-idx', idx) à chaque clic, et lisez parseInt(localStorage.getItem('mph-idx') || '0') au chargement. Encadrez les accès dans un try/catch car localStorage peut être bloqué en navigation privée.
