Multi Orbit
Un soleil blanc au centre de trois anneaux très discrets, et cinq planètes de 6 à 14 px qui tournent toutes dans le même sens en 3, 5 et 8 s, deux à deux en opposition sur les orbites extérieures : un petit système à plusieurs rythmes, en CSS pur avec offset-path: circle(), figé et lisible 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
Le bloc .fx-0038-root fait au moins 300 px de haut et toute la largeur disponible, fond #0a0a0f. Au centre, .mp-multiorbit-scene (260 × 260 px) contient trois anneaux de 100, 160 et 220 px (bordure blanche à 6 %, presque invisible), un soleil blanc de 30 px avec un halo, et cinq planètes en position: absolute. Le soleil passe devant (z-index: 2).
Chaque planète suit un cercle centré sur la scène : offset-path: circle(50px), circle(80px) ou circle(110px), sur lequel elle se place par son centre, parcouru par l'animation mpOrbit (offset-distance de 0 à 100 %, linéaire, sens des aiguilles d'une montre, départ à 3 heures). L'orbite intérieure porte la planète rouge de 14 px (3 s par tour), l'orbite moyenne une jaune de 10 px et une cyan de 12 px (5 s), l'orbite extérieure une verte de 8 px et une violette de 6 px (8 s). Sur les deux orbites partagées, la seconde planète a un délai négatif d'une demi-période (-2.5s, -4s) : elle part déjà à mi-tour, à l'opposé de sa voisine, et le reste.
Les vitesses au sol sont proches (environ 105, 100 et 86 px par seconde) : ce sont les tours qui diffèrent, pas l'allure, comme des planètes. La disposition de départ ne revient qu'au bout de 120 s (le plus petit multiple commun de 3, 5 et 8), si bien que l'œil ne voit pas de boucle. Pas de script, pas d'identifiant : deux copies du bloc sur une page tournent chacune de leur côté (mesuré). Sous prefers-reduced-motion: reduce, un bloc limité à .fx-0038-root retire les animations et pose les cinq planètes à des places fixes (15, 40, 90, 70 et 20 % de leur orbite), les paires toujours face à face.
Accessibilité
- Mouvement réduit : sous
prefers-reduced-motion: reduce, les cinq planètes s'arrêtent, réparties sur leurs orbites, au lieu de s'empiler au point de départ. Mesuré dans Chromium, Firefox et WebKit : 0 animation en cours, 0 % des pixels changent en 800 ms. - Contenu décoratif : aucun texte dans le dessin. S'il illustre des lignes ou des tournées, mettez
aria-hidden="true"sur la racine et donnez l'information en texte à côté (une légende par couleur, comme dans les exemples). - Couleur seule : les planètes se distinguent par la couleur et un peu par la taille (6 à 14 px). Si la légende repose sur la couleur, écrivez le nom de chaque ligne en clair ; les plus petites planètes (6 et 8 px) se voient mal sur un écran de téléphone en plein soleil.
- Aucune interaction : l'effet ne réagit ni à la souris, ni au doigt, ni au clavier, et ne prend pas le focus.
Compatibilité navigateur
CSS pur : offset-path: circle(), offset-distance animé, animation-delay négatif, prefers-reduced-motion. Aucune dépendance, aucun JavaScript. Mesuré dans Chromium 151, Firefox 153 et WebKit 26.5 : chaque planète reste à moins de 0,1 px de son cercle, mêmes périodes, même arrêt sous mouvement réduit, deux copies indépendantes sur la page.
Sans offset-path: circle(), les cinq planètes restent au centre, cachées derrière le soleil (mesuré en retirant la propriété) : on voit un soleil et ses anneaux, immobiles, rien de cassé.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0038-root">
<div class="mp-multiorbit-scene">
<div class="mp-multiorbit-ring mp-multiorbit-ring--1"></div> <!-- 100 px -->
<div class="mp-multiorbit-ring mp-multiorbit-ring--2"></div> <!-- 160 px -->
<div class="mp-multiorbit-ring mp-multiorbit-ring--3"></div> <!-- 220 px -->
<div class="mp-multiorbit-center"></div>
<div class="mp-multiorbit-planet mp-multiorbit-planet--1"></div> <!-- circle(50px), 3 s -->
<div class="mp-multiorbit-planet mp-multiorbit-planet--2"></div> <!-- circle(80px), 5 s -->
<div class="mp-multiorbit-planet mp-multiorbit-planet--3"></div> <!-- circle(80px), 5 s, -2.5 s -->
<div class="mp-multiorbit-planet mp-multiorbit-planet--4"></div> <!-- circle(110px), 8 s -->
<div class="mp-multiorbit-planet mp-multiorbit-planet--5"></div> <!-- circle(110px), 8 s, -4 s -->
</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 |
|---|---|---|
Durée d'un tour (CSS — animation de chaque .mp-multiorbit-planet--N) |
3 s, 5 s et 8 s | Gardez les deux planètes d'une même orbite à la même durée, sinon elles se rattrapent et la paire se défait. Des durées sans multiple commun proche retardent le retour de la disposition de départ. |
Opposition sur une orbite (CSS — animation-delay négatif) |
-2.5s sur 5 s, -4s sur 8 s |
Une demi-période place la planète en face de sa voisine. Pour trois planètes régulièrement espacées sur une orbite de 6 s : 0, -2s et -4s. |
Rayon des orbites (CSS — offset-path: circle(50px), 80px, 110px) |
50, 80 et 110 px | Changez aussi la taille de l'anneau (diamètre = deux fois le rayon : 100, 160, 220 px). Pour tout agrandir, préférez transform: scale() sur .mp-multiorbit-scene. |
Visibilité des anneaux (CSS — border de .mp-multiorbit-ring) |
blanc à 6 % | Montez à 20-30 % pour montrer les trajets (lignes de navette, tournées) ; sur fond clair, passez à une couleur sombre. |
Taille d'une planète (CSS — width et height) |
14, 10, 12, 8 et 6 px | Changez width et height : la planète reste centrée sur son anneau quelle que soit sa taille. La marge négative du code n'a aucun effet sur la trajectoire (mesuré avec une planète de 24 px). |
Couleurs (CSS — background et box-shadow) |
rouge, jaune, cyan, vert, violet ; soleil blanc | Le halo de chaque planète est un box-shadow de sa teinte à 50 % : changez les deux ensemble. |
FAQ
offset-path: circle(), mais pour deux récits différents. Orbit Circle (gratuit) joue sur le sens : un noyau violet, deux anneaux en pointillés bien visibles, trois points dont deux se croisent à contresens sur le même anneau. Multi Orbit joue sur la période : un soleil blanc, trois anneaux presque effacés, cinq planètes qui tournent toutes dans le même sens à trois rythmes, deux à deux en opposition. Prenez Orbit Circle pour montrer deux flux qui se croisent ; Multi Orbit pour montrer plusieurs fréquences autour d'un même centre (navettes, tournées, système solaire).perspective ni preserve-3d. Un transform: rotateX(60deg) sur .mp-multiorbit-scene écrase les cercles en ellipses, mais il écrase aussi les planètes, qui deviennent des ovales. Pour des orbites vues en biais avec des planètes rondes, il faudrait des trajectoires en ellipse (offset-path: ellipse()) dans un plan droit.
