Elastic Scale
Scale(1,15) au survol avec cubic-bezier(0.34, 1.56, 0.64, 1) — l'élément dépasse la cible de ~8 % avant de revenir : rebond élastique visible. Scale(0.95) au clic via :active. Aucun JavaScript.
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
La racine .fx-0359-root centre un bloc .hover-box.hover-elastic de 200 × 200 px sur fond #0a0a0f. L'élément porte une transition transform .5s cubic-bezier(.34, 1.56, .64, 1) — cette courbe de Bézier cubique a un point de contrôle au-dessus de 1 (1.56), ce qui lui permet de dépasser la valeur cible avant de redescendre. L'overshoot est d'environ 8 % : pour scale(1.15), l'élément atteint brièvement ~scale(1.24) avant de se stabiliser à 1.15.
Au survol (ou au focus), transform: scale(1.15) déclenche la transition avec rebond. Au clic (:active), transform: scale(0.95) avec une transition plus courte (0,1 s) donne un retour tactile immédiat. La combinaison hover-rebond + active-rétraction simule la physique d'un objet mou qu'on touche et qui s'enfonce au contact.
Mesuré dans Chromium 151 : overshoot visible (~8 %), :active immédiat, deux copies sur la même page — seule celle survolée s'anime.
Accessibilité
- Mouvement réduit : sous
prefers-reduced-motion: reduce, la transition et le transform sont annulés ; au survol l'élément affiche unfilter: brightness(1.15)fixe — le changement est visible sans mouvement. - Clavier : l’élément est un
<button>nativement focusable. La règle:focus-visibledéclenche le même scale(1.15) élastique ; un contour indigo signale le focus. - Overflow : le scale agrandit l'élément au-delà de son empreinte ; sur une grille serrée, le voisin peut être masqué. Ajoutez
overflow: hiddenou unpaddingsuffisant au conteneur parent. - Clic : le
:activerend le clic physiquement perceptible sans JavaScript. Assurez-vous que l'action au clic est également accessible au clavier (Entrée / Espace).
Compatibilité navigateur
CSS pur (transform: scale, cubic-bezier, transition, :active, :focus-visible, prefers-reduced-motion), aucun JavaScript. Mesuré dans Chromium 151 : overshoot visible, :active immédiat, deux copies indépendantes. Fonctionne dans tous les navigateurs modernes.
Sans cubic-bezier avec overshoot, utilisez ease-out : le scale reste fluide sans rebond. Sans transition, le scale est instantané mais fonctionnel.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0359-root">
<button class="hover-box hover-elastic" type="button">
<span>…</span>
</button>
</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 |
|---|---|---|
Amplitude du rebond (CSS — cubic-bezier(.34, 1.56, .64, 1)) |
Deuxième point de contrôle à 1.56 → overshoot ~8 % | Augmentez la seconde valeur y du 2e point de contrôle : 1.7 donne un overshoot ~20 % ; 1.2 donne un léger frémissement. Réduisez à 1.0 pour supprimer le rebond. |
Scale cible (CSS — scale(1.15)) |
15 % d'agrandissement | scale(1.08) pour un effet subtil ; scale(1.3) pour un effet fort. Sur des éléments larges, 1.08–1.1 évite de déborder sur les voisins. |
Scale au clic (CSS — :active { scale(.95) }) |
5 % de rétraction | scale(.9) pour un enfoncement plus prononcé ; retirez le bloc :active pour désactiver le retour tactile au clic. |
Durée (CSS — transition: transform .5s) |
500 ms | .3s rend le rebond plus vif mais l'overshoot moins visible ; .7s le rend plus mou et prononcé. |
Couleur de fond (CSS — background de .hover-elastic) |
linear-gradient(135deg, #14b8a6, #0d9488) |
Remplacez par n'importe quelle couleur ou dégradé. L'effet élastique est indépendant du fond. |
FAQ
cubic-bezier(0.34, 1.56, 0.64, 1) signifie : démarrage lent, dépassement ~8 % en milieu de course, arrivée à la valeur cible.transform: scale agrandit visuellement l'élément mais ne modifie pas la mise en page (le flux reste intact). Ajoutez overflow: hidden au conteneur de la grille ou utilisez un z-index explicite sur l'élément survolé pour qu'il s'affiche devant ses voisins.:hover (pour l'entrée). Par exemple, entrée avec overshoot (cubic-bezier(.34,1.56,.64,1)) et sortie rapide (ease-in .2s).
