Bounce Path
Une balle verte de 20 px fait cinq rebonds de plus en plus bas (80, 40, 30, 15 puis 7,5 px de haut), roule sur la ligne de sol et s'arrête, en 3 s, puis recommence : l'amortissement d'un objet qui perd son énergie, en CSS seul, sans JavaScript — et une balle posée au sommet du premier rebond 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. 3D comprend 50 effets, dont 8 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
La racine .fx-0036-root (fond #0a0a0f, 300 px de haut au minimum) centre une scène .mp-bounce-scene de 300 × 220 px. Un <svg> y trace en pointillés très pâles la trajectoire complète : cinq arcs (courbes de Bézier quadratiques) qui partent tous du sol, à y = 180, et montent à 80, 40, 30, 15 puis 7,5 px, suivis d'une ligne droite de 50 px où la balle roule. La ligne de sol .mp-bounce-floor, 2 px de haut, est posée à bottom: 28px, soit exactement sous la balle quand son centre touche y = 180 : mesuré, le bas de la balle et le haut du sol coïncident au pixel dans Chromium 151, Firefox 153 et WebKit 26.
La balle .mp-bounce-ball (dégradé #10b981 → #059669, halo vert) reçoit le même tracé en offset-path: path(…) et une animation qui fait passer offset-distance de 0 à 100 % en 3 s, en boucle. Son centre est posé sur le tracé : pas de marge négative, la balle passe donc exactement sur les pointillés. À la fin du roulement, la boucle reprend au départ : la balle réapparaît à gauche, en l'air au pied du premier arc.
Le ralenti ease-in-out s'applique au trajet entier, pas à chaque rebond : la balle part doucement, va le plus vite au milieu de la série, puis ralentit pendant les petits rebonds et le roulement. Une vraie balle ralentirait au sommet de chaque arc. Le rendu est donc stylisé, et c'est ce qui le garde lisible : les rebonds rapetissent, l'élan s'éteint, sans calcul de physique ni JavaScript. Pour un mouvement physique, il faudrait une animation par rebond, ou un script.
Accessibilité
- Mouvement réduit : sous
prefers-reduced-motion: reduce, un bloc limité à.fx-0036-rootarrête la balle au sommet du premier rebond (offset-distance: 19.7%), au-dessus de la trajectoire en pointillés : on lit encore les rebonds qui rapetissent. Mesuré : 0 % de pixels changés en 0,8 s dans Chromium, Firefox et WebKit, contre 0,75 % en mode normal. - Contenu décoratif : aucune information n'est portée par la balle ; le svg et les
divvides sont ignorés des lecteurs d'écran. Si les rebonds illustrent une donnée (un nombre de rebonds, une perte d'énergie), écrivez-la à côté. - Contraste : la balle verte se détache du fond sombre ; le tracé (10 % d'opacité) et le sol (8 %) sont volontairement discrets. Sur fond clair, foncez-les (voir « Personnaliser »).
- Rythme : une boucle de 3 s, sans clignotement ; la reprise au départ est un saut de la balle, pas un flash de lumière.
Compatibilité navigateur
CSS seul : offset-path: path() et offset-distance animé, aucun JavaScript, aucune dépendance. Mesuré dans Chromium 151, Firefox 153 et WebKit 26 (le moteur de Safari) : positions de la balle identiques au quart de pixel près, contact balle-sol au pixel, même arrêt sous mouvement réduit. Non vérifié sur un vrai Safari.
Un navigateur sans offset-path laisse la balle immobile en haut à gauche de la scène, au-dessus de la trajectoire en pointillés et de la ligne de sol, qui restent visibles.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0036-root">
<div class="mp-bounce-scene">
<svg viewBox="0 0 300 220" fill="none">
<path d="M20,180 Q60,20 100,180 Q130,100 160,180 … L280,180" … />
</svg>
<div class="mp-bounce-ball"></div>
<div class="mp-bounce-floor"></div>
</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 |
|---|---|---|
Couleur de la balle (CSS — .mp-bounce-ball) |
Dégradé #10b981 → #059669, halo vert | Changez le background et la couleur du box-shadow ; sur fond clair, remplacez le halo par une petite ombre. |
Vitesse (CSS — 3s de l'animation) |
3 s pour toute la série | 2 s pour une balle vive, 4 à 5 s pour une démonstration. La série reste la même : seul le tempo change. |
Ralenti (CSS — ease-in-out) |
ease-in-out sur tout le trajet | linear donne une vitesse constante, plus mécanique ; ease-out lance la balle vite puis l'éteint, proche d'un ricochet. |
| Forme des rebonds (HTML + CSS) | 5 arcs de 80, 40, 30, 15 et 7,5 px, puis 50 px de roulement | Le tracé est écrit deux fois, dans le d du chemin svg et dans l'offset-path : changez les deux. Gardez les arcs à y = 180 pour que la balle touche le sol. |
Ligne de sol (CSS — .mp-bounce-floor) |
2 px, bottom: 28px, blanc à 8 % | Sa position est calée sur le bas de la balle (sol du tracé à 180 + rayon de 10 px). Si vous changez la taille de la balle ou la hauteur du sol, recalez bottom. |
Fond (CSS — .fx-0036-root) |
#0a0a0f | Changez ou retirez le fond pour poser la scène sur votre page ; foncez alors le tracé et le sol. |
FAQ
infinite par 1 et ajoutez forwards : animation: 3s ease-in-out 0s 1 normal forwards running mpOrbit. La balle finit à droite, au bout du roulement, et y reste. Pour la relancer au clic, retirez puis remettez l'animation avec une classe.
