Rollercoaster
Un wagonnet orange à deux roues parcourt en 4 s un tracé de montagnes russes (montée, grande descente, creux, petite bosse) en penchant le nez selon la pente grâce à offset-rotate: auto, ralenti au départ et à l'arrivée, puis repart du début : la seule trajectoire du catalogue où l'objet s'oriente lui-même — CSS seul, zéro JavaScript, wagonnet arrêté en pleine descente 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-0040-root (fond #0a0a0f, 300 px de haut au minimum) centre une scène .mp-roller-scene de 320 × 220 px. Un <svg> y dessine le parcours, dix courbes de Bézier quadratiques en trait ambré à 15 %, et un second trait blanc à 5 %, le même décalé de 4 px vers le bas : le rail double. Le wagonnet .mp-roller-car est un rectangle de 20 × 14 px, #f59e0b, aux coins arrondis ; son pseudo-élément ::after dessine une roue grise de 5 px et la seconde par un box-shadow décalé de 11 px.
Le wagonnet reçoit le tracé du parcours en offset-path: path(…) et une animation de offset-distance de 0 à 100 % en 4 s, ease-in-out, en boucle. offset-rotate: auto le fait tourner à chaque instant dans le sens de la tangente : mesuré à quatre moments du trajet, l'angle de la caisse suit la pente du tracé au demi-degré près (68° contre 68,2° dans la montée, 71,5° contre 71,6° dans la grande descente), à l'identique dans Chromium 151, Firefox 153 et WebKit 26.
offset-anchor: 50% 100% choisit le point du wagonnet posé sur le tracé : le milieu du bas de la caisse, et non son centre. La caisse roule donc au-dessus du trait, et les roues, qui dépassent de 4 px sous la caisse, tombent entre les deux traits du rail ; c'est aussi autour de ce point que le wagonnet pivote. Le ralenti s'applique au trajet entier : départ lent, pleine vitesse dans la grande descente, freinage sur la dernière bosse, puis le wagonnet revient d'un coup au départ.
Accessibilité
- Mouvement réduit : sous
prefers-reduced-motion: reduce, un bloc limité à.fx-0040-rootarrête le wagonnet au milieu de la grande descente (offset-distance: 50%), le nez vers le bas : l'image fixe dit encore « montagnes russes ». Mesuré : 0 % de pixels changés en 0,8 s dans Chromium, Firefox et WebKit, contre 0,75 % en mode normal. - Contenu décoratif : la scène ne porte aucun texte ; le svg et le wagonnet, une
divvide, sont ignorés des lecteurs d'écran. Écrivez à côté ce que le parcours représente (attraction, galerie, piste). - Contraste : le wagonnet orange mesure 9,2:1 sur le fond sombre ; le tracé, à 15 %, et le rail, à 5 %, sont volontairement pâles. Sur un fond clair, foncez-les et épaississez-les, comme dans les exemples.
- Rythme : une boucle de 4 s, sans clignotement ; le retour au départ est un saut du wagonnet.
Compatibilité navigateur
CSS seul : offset-path: path(), offset-rotate: auto, offset-anchor et offset-distance animé, aucun JavaScript, aucune dépendance. Mesuré dans Chromium 151, Firefox 153 et WebKit 26 (le moteur de Safari) : mêmes positions, même angle de la caisse, même arrêt sous mouvement réduit. Non vérifié sur un vrai Safari.
Un navigateur qui connaît offset-path mais pas offset-anchor centre la caisse sur le tracé : le wagonnet roule et s'oriente, les roues passent juste sous le rail. Sans offset-path, le wagonnet reste immobile en haut à gauche de la scène et le parcours reste dessiné.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0040-root">
<div class="mp-roller-scene">
<svg viewBox="0 0 320 220" fill="none">
<path d="M10,180 Q40,180 60,120 … 300,140" … /> <!-- parcours -->
<path d="M10,184 Q40,184 60,124 … 300,144" … /> <!-- rail -->
</svg>
<div class="mp-roller-car"></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 et forme du wagonnet (CSS — .mp-roller-car) |
20 × 14 px, #f59e0b, coins de 4 px, halo orange | Changez background, border-radius et box-shadow. Si vous changez la taille, gardez les roues (::after, bottom: -4px) sous la caisse. |
Point posé sur le rail (CSS — offset-anchor) |
50% 100% (milieu du bas de la caisse) | 50% 50% centre la caisse sur le trait ; 50% 18px pose le bas des roues sur le trait. Le wagonnet pivote autour de ce point. |
Orientation (CSS — offset-rotate) |
auto (suit la pente) | auto 180deg retourne le wagonnet (marche arrière) ; 0deg le garde horizontal, comme une nacelle suspendue. |
Vitesse et ralenti (CSS — 4s ease-in-out) |
4 s, départ et arrivée lents | linear donne une vitesse constante ; cubic-bezier(.5,0,.8,.6) accélère dans la descente. 6 s pour une visite tranquille, 2,5 s pour une attraction à sensations. |
| Tracé (HTML + CSS) | Montée, grande descente, creux, petite bosse sur 320 × 220 px | Le tracé est écrit trois fois : le trait du parcours, le rail (même tracé, 4 px plus bas) et l'offset-path. Changez les trois ensemble. |
Fond (CSS — .fx-0040-root) |
#0a0a0f | Changez ou retirez le fond ; sur fond clair, foncez et épaississez le parcours et le rail. |
FAQ
offset-rotate: auto : le navigateur calcule la tangente du tracé au point atteint et tourne l'élément d'autant, à chaque image. Rien à calculer, pas de JavaScript. Mesuré : l'angle de la caisse suit la pente au demi-degré près dans Chromium, Firefox et WebKit.linear ; pour un seul passage, utilisez 1 et forwards à la place d'infinite.
