https://github.com/divriots/orbiting-elements
Created with WebComponents.dev
https://github.com/divriots/orbiting-elements
Last synced: 3 months ago
JSON representation
Created with WebComponents.dev
- Host: GitHub
- URL: https://github.com/divriots/orbiting-elements
- Owner: divriots
- Created: 2022-01-26T16:03:54.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2022-04-20T13:07:23.000Z (about 4 years ago)
- Last Synced: 2026-02-19T11:38:28.113Z (4 months ago)
- Language: HTML
- Homepage: https://webcomponents.dev/view/K4nq9IUNbvXxLX7C1Z0r
- Size: 37.1 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Orbiting Elements
A Web Component that orbits a certain number of elements around a core element.
Fully flexible to add your own core element or orbiting elements, see demos for advanced use cases.
[See landing page](https://divriots.github.io/orbiting-elements/)
[See the full demos & code](https://webcomponents.dev/edit/K4nq9IUNbvXxLX7C1Z0r/stories/index.stories.js)
## Usage
```sh
npm i @divriots/orbiting-elements
```
```js
// CE definition for orbiter-element / orbiting-element
import '@divriots/orbiting-elements/define';
// In case you only want to define the orbiter element or orbiting element separately
import '@divriots/orbiting-elements/define-orbiter-element';
import '@divriots/orbiting-elements/define-orbiting-element';
// Using the base classes (e.g. for extension)
import { OrbiterElement, OrbitingElement } '@divriots/orbiting-elements';
```
```html
...
...
...
...
...
```
## Features
These features are specific to the orbiter-element or its assigned nodes (orbiting slottables).
- Orbiting elements pause on hover, use `pause-all-on-hover` attribute on the `orbiter-element` to make every orbiting element pause when a single one gets hovered.
- Use `direction` property (-1 or 1) on the orbiting elements to configure clockwise or counter-clockwise orbit direction.
- Use `start-distributed` attribute on the `orbiter-element` to make all orbiting elements start off with equal spacing between one another.
- Use `rotationSpeed` property on the orbiting elements to configure the rotation speed.
- Use `angle` property on the orbiting elements to configure at which angle they start rotating.
- Use `radian` property on the orbiting elements to set their current position to a different angle, this property is meant more as a private prop and must be in the range of 0 and 2 PI.
These features are specific to the `orbiting-element` but not coupled to the implementation details of the `orbiter-element`.
- Use `float-speed` attribute on the `orbiting-element` to configure how fast it floats up and down.
- Use `float-amount` attribute on the `orbiting-element` to configure how much it floats up and down.
