Bezier Curve
Une balle orange de 22 px fait l'aller-retour sur un arc de Bézier cubique en 2,5 s, ralentie aux deux bouts, avec les deux poignées et leurs points de contrôle dessinés en pointillés : on voit la courbe et sa construction, et une ombre au sol suit la balle en rapetissant quand elle monte — CSS seul, zéro JavaScript, balle posée au sommet 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-0033-root (fond #0a0a0f, 300 px de haut au minimum) centre une scène .mp-bezier-scene de 300 × 220 px. Un <svg> de la même taille y dessine trois choses en traits discrets : l'arc M30,190 C30,30 270,30 270,190 en pointillés, les deux points de contrôle (30,30) et (270,30), et les deux poignées qui les relient aux extrémités de l'arc. Par-dessus, deux div : .mp-bezier-shadow, l'ombre, et .mp-bezier-ball, la balle (dégradé #f59e0b → #f97316 et halo orange).
La balle reçoit offset-path: path("M 30 190 C 30 30 270 30 270 190"), le même tracé que le svg, et une animation qui fait passer offset-distance de 0 à 100 % en 2,5 s, ease-in-out, alternate : elle va, ralentit, repart en sens inverse. Le navigateur pose le centre de la balle sur le point du tracé ; la balle n'a donc pas de marge négative, et son centre reste sur la courbe dessinée (écart mesuré : 0,2 px au plus dans Chromium 151, Firefox 153 et WebKit 26, avec des positions identiques dans les trois). Le tracé est le même partout parce que le svg n'est pas étiré : 300 × 220 px pour un viewBox de 300 × 220.
L'ombre est une ellipse orangée de 32 × 8 px posée sous les extrémités de l'arc. Elle ne peut pas suivre la balle avec un second offset-path : offset-distance mesure la distance parcourue le long de la courbe, pas la position horizontale, et la balle monte presque à la verticale au départ. Ses images clés fx0033Shadow donnent donc, tous les 5 % du temps, la position horizontale de la balle déjà calculée sur la courbe, avec le ralenti ease-in-out inclus ; l'animation de l'ombre est linéaire, de même durée et en alternate. Écart mesuré entre la balle et son ombre : 0,1 px. En même temps, l'ombre passe de l'échelle 1 et 90 % d'opacité au sol à 0,5 et 40 % au sommet : c'est elle qui donne la hauteur.
Accessibilité
- Mouvement réduit : sous
prefers-reduced-motion: reduce, un bloc limité à.fx-0033-rootarrête la balle au sommet de la courbe (offset-distance: 50%), entre les deux poignées, et l'ombre juste en dessous. Mesuré : 0 % de pixels changés en 0,8 s dans Chromium, Firefox et WebKit, contre 1,2 % en mode normal. - Contenu décoratif : la scène ne porte aucun texte ; le svg et les
divvides sont ignorés des lecteurs d'écran. Si la courbe explique quelque chose (un outil de dessin, un geste sportif), écrivez l'explication à côté, comme dans les exemples ci-dessus. - Contraste : la balle orange se lit bien sur le fond sombre ; le tracé et les poignées sont volontairement pâles (12 % et 30 % d'opacité). Pour un cours où la construction compte, renforcez-les (voir « Personnaliser »).
- Rythme : un aller ou un retour en 2,5 s, sans clignotement ; le mouvement reste dans un cadre de 300 × 220 px.
Compatibilité navigateur
CSS seul : offset-path: path(), offset-distance animé et une animation de transform pour l'ombre, aucun JavaScript, aucune dépendance. Mesuré dans Chromium 151, Firefox 153 et WebKit 26 (le moteur de Safari) : mêmes positions de la balle au demi-pixel près, même ombre, 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 ; le tracé, les poignées et l'ombre (qui, elle, continue de glisser au sol) restent visibles.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0033-root">
<div class="mp-bezier-scene">
<svg viewBox="0 0 300 220" fill="none">
<path d="M30,190 C30,30 270,30 270,190" … /> <!-- la courbe -->
<circle … /> <circle … /> <!-- points de contrôle -->
<line … /> <line … /> <!-- poignées -->
</svg>
<div class="mp-bezier-shadow"></div>
<div class="mp-bezier-ball"></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-bezier-ball) |
Dégradé #f59e0b → #f97316, halo orange | Changez le background et la couleur du box-shadow. Sur fond clair, remplacez le halo par une petite ombre portée. |
Ombre au sol (CSS — .mp-bezier-shadow) |
Ellipse orangée de 32 × 8 px | Sur fond clair, passez le dégradé en brun ou gris sombre (rgba(60,45,25,.8)) : une ombre noire disparaît sur fond noir, d'où l'orangé par défaut. Pour la retirer, supprimez la div et sa règle. |
Vitesse (CSS — 2.5s dans les deux animation) |
2,5 s par trajet | Changez la durée de la balle ET de l'ombre ensemble, sinon l'ombre se décale. 1,5 s donne un lancer vif, 4 s une démonstration lente. |
Poignées et points de contrôle (HTML — circle et line du svg) |
Points de 3 px à 30 %, poignées à 8 % d'opacité | Pour un cours, montez l'opacité ou recolorez-les ; pour un simple décor, masquez-les en CSS (display: none) : seule la courbe en pointillés reste. |
| Forme de la courbe (HTML + CSS) | M30,190 C30,30 270,30 270,190 | Le tracé est écrit trois fois : d du chemin svg, offset-path de la balle, et les images clés de l'ombre, calculées pour cette courbe. Si vous changez la courbe, changez les deux premiers et recalculez les images clés (position horizontale de la balle tous les 5 % du temps), ou retirez l'ombre. |
Fond (CSS — .fx-0033-root) |
#0a0a0f | Changez ou retirez le fond de la racine pour poser la scène sur votre page ; pensez alors aux couleurs du tracé et de l'ombre. |
FAQ
offset-distance se décalerait de 27 px au pire moment. Les 21 images clés donnent la vraie position horizontale de la balle, ralenti compris ; mesuré, l'ombre reste à 0,1 px sous la balle. Le prix : si vous changez la courbe ou le ralenti, il faut les recalculer.animation-direction: alternate : un trajet sur deux se joue à l'envers, et le ralenti ease-in-out fait que la balle s'arrête presque à chaque extrémité. C'est le va-et-vient d'une balle qu'on se renvoie. Avec normal, la balle sauterait de l'arrivée au départ à chaque tour : ajoutez alors un fondu, ou préférez un tracé fermé.stroke-dashoffset ; Bounce Path enchaîne cinq rebonds de plus en plus bas. Pour expliquer une courbe, un geste ou une hauteur de lancer, c'est Bezier Curve.
