The .orbit CSS class, along with variations from .orbit-0 to .orbit-24, defines a circular path around a .gravity-spot. Within .orbit element, various Orbit elements such as satellites, o-arcs, o-progress, vectors and sides can be positioned.
Orbits are initially invisible but can be customized by adding CSS border and background properties.
Number of orbitsOrbit supports 25 orbits. Orbits from 0 to 12 are placed whitin .gravity-spot force, while orbits from 13 to 24 extend beyond .gravity-spot force boundary.
.orbit-0 has not size and it is placed at center of .gravity-spot..gravity-spot force, that is 500px by default but can be easily changed using --o-force custom CSS var..gravity-spot force.Each .orbit has a fraction size of .gravity-spot force. For example, .orbit-6 (or .orbit child number 6), represents 50% of .gravity-spot force. Here is the complete list:
.orbit-0 0% .orbit-1 or .orbit child 1 ~8% .orbit-2 or .orbit child 2 ~16% .orbit-3 or .orbit child 3 25% .orbit-4 or .orbit child 4 ~33% .orbit-5 or .orbit child 5 ~42% .orbit-6 or .orbit child 6 50% .orbit-7 or .orbit child 7 ~58% .orbit-8 or .orbit child 8 ~66% .orbit-9 or .orbit child 9 ~75% .orbit-10 or .orbit child 10 ~83% .orbit-11 or .orbit child 11 ~91% .orbit-12 or .orbit child 12 100% .orbit-13 or .orbit child 13 ~108% .orbit-14 or .orbit child 14 ~116% .orbit-15 or .orbit child 15 125% .orbit-16 or .orbit child 16 ~133% .orbit-17 or .orbit child 17 ~142% .orbit-18 or .orbit child 18 150% .orbit-19 or .orbit child 19 ~158% .orbit-20 or .orbit child 20 ~166% .orbit-21 or .orbit child 21 ~175% .orbit-22 or .orbit child 22 ~183% .orbit-23 or .orbit child 23 ~191% .orbit-24 or .orbit child 24 200% Adjust orbit size
Each .orbit or .orbit-* can be finely adjusted using the CSS class utility .shrink-10 to .shrink-90, allowing the orbit to shrink by a specified percentage.
Stacking order follows standard HTML rules. In the example below, the latter orbit is abowe the former one.
Turn Orbits into ellipses: Two CSS variables (--o-ellipse-x and --o-ellipse-y) can transform .orbit or .orbit-* into an ellipse shape. This transformation affects the orbit and its children, excluding o-arc, o-progress, and o-text web components, which remain hidden when the orbit is elliptical. Values for these variables range from 0 to 1. A CSS utlity could be added in a future.
Both CSS variable can be used in the same orbit.
Orbits aligmentBy default, orbits are aligned at .gravity-spot center but remember there are some CSS utilities class to change aligment. You can use .at-center (default), .at-center-left, .at-center-right, .at-top, .at-top-left, .at-top-right, .at-bottom, .at-bottom-left, .at-bottom-right.
This example shows how to nest orbits to created complex radial designs.
By default, these Orbit elements are evenly distributed along the perimeter of .orbit. For instance, if there are five satellites, they will be spaced 72 degrees apart, covering the full 360-degree range of .orbit. The zero degree of Orbit is positioned similar to the 12 o’clock mark on an analog clock.
Note
Orbit children elements include .satellite, .vector, .side, o-arc, and o-text.
.range-*: Set arbitrary orbit range from 0 to 360 length. If custom range is defined, .fit-range could be added to justify children distribution.
Note
.range-* affects .satellite, .vector, .side, o-arc, and o-text.
.from-*: Set starting point angle from 0 to 360 degrees.
.ccw: Invert orbit child arragement to counter clock wise direction.
.gooey-fx-*: This CSS utility enhances the appearance of grouped and sticky child elements within the orbit. Possible values are .gooey-fx, .gooey-fx-medium, and .gooey-fx-max
Note
Gooey effect does not work on Safari browser.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4