Spring Physics
Chaque boîte stocke sa propre physique de ressort : un clic imprime une force initiale, la boucle calcule accélération et amortissement trame par trame jusqu'au retour au repos. Plusieurs boîtes rebondissent indépendamment sur la même page, chacune avec son propre cycle. Sans animation CSS, sans bibliothèque.
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-0386-root centre horizontalement les trois boîtes (.spring-box[data-spring]) dans un conteneur de 300 px de haut. Le script trouve toutes les racines présentes sur la page — plusieurs instances cohabitent — puis, pour chaque boîte marquée data-spring, crée un contexte de physique isolé : une position t, une accélération a, un drapeau running.
Au clic (ou au toucher), a reçoit une impulsion de −15. À chaque trame, la boucle applique a += 0.3 × −t (force de rappel proportionnelle au déplacement, loi de Hooke), puis a *= 0.7 (amortissement de 30 %) et t += a. La boîte est repositionnée via translateY(t) scale(1 + 0.01 × |t|) : elle monte, dépasse le centre, revient en oscillant de moins en moins. Quand |t| < 0.05 et |a| < 0.05, la boucle s'arrête d'elle-même et repose la boîte à zéro.
Chaque boîte possède son propre requestAnimationFrame, indépendant des autres : cliquer sur « BOUNCE » pendant que « SPRING » rebondit encore ne perturbe pas les deux cycles. Deux copies de l'effet sur la même page fonctionnent de façon identique, chacune trouvée par son propre .fx-0386-root.
Accessibilité
- Mouvement réduit : sous
prefers-reduced-motion: reduce, la boucle ne démarre pas et le CSS forcetransform: nonesur les boîtes. Les boîtes restent visibles, cliquables et lisibles — le retour visuel disparaît, pas le contenu. - Clavier : les boîtes
.spring-boxsont des<div>cliquables mais non focusables par défaut — ajoutertabindex="0"et un écouteurkeydownsur Entrée/Espace pour les rendre accessibles au clavier si l'effet est utilisé comme bouton fonctionnel. - Toucher : un
touchstartdéclenche le ressort, avecpreventDefaultpour éviter le double-tir souris/toucher. L'effet fonctionne au doigt sur mobile. - Rôle décoratif ou fonctionnel : si les boîtes portent une action (vote, téléchargement), remplacez les
<div>par des<button>et supprimez letouchstartsuperflu — un<button>répond nativement aux événements clavier et tactiles.
Compatibilité navigateur
JavaScript ES5 (closures, requestAnimationFrame, matchMedia), aucune dépendance. Non mesuré dans Firefox et WebKit : le comportement attendu est identique puisque l'effet n'utilise que des APIs universelles.
Sans JavaScript, les boîtes s'affichent à leur position de repos sans animation. Sans matchMedia (navigateurs très anciens), le ressort s'anime même sous mouvement réduit.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0386-root"><div class="physics-container"><div class="spring-demo"><div class="spring-box" data-spring="">LABEL</div></div><span class="info-label">Texte d'aide</span></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 |
|---|---|---|
Impulsion initiale (JS — a = -15) |
−15 | −8 donne un ressort plus doux, −25 un bond plus marqué. Valeur négative pour partir vers le bas, positive pour monter. |
Rappel (JS — a += 0.3 × −t) |
0.3 | 0.1 ralentit le ressort (oscillations longues), 0.5 l'accélère (retour brusque). |
Amortissement (JS — a *= 0.7) |
0.7 | 0.9 donne un ressort presque sans friction (rebondit longtemps), 0.5 l'arrête rapidement. |
Couleur des boîtes (CSS — background de .spring-box) |
linear-gradient(135deg, #6366f1, #8b5cf6) |
Remplacez par la couleur primaire de votre charte ou par un fond uni. Le texte des boîtes peut être changé directement dans le HTML. |
| Nombre de boîtes (HTML) | 3 boîtes | Ajoutez ou supprimez des .spring-box[data-spring] ; chaque nouvelle boîte reçoit automatiquement sa propre physique. |
FAQ
requestAnimationFrame indépendante. Cliquer rapidement sur les trois lance trois ressorts en parallèle, sans interférence.|t| < 0.05 et |a| < 0.05). Pour accélérer l'arrêt, réduisez la valeur d'amortissement (par exemple a *= 0.5).click par mouseenter et ajoutez un a = 0; t = 0; sur mouseleave si vous voulez réinitialiser l'état à la sortie.
