3.1.1 • Published 4 months ago
bubbles-rising v3.1.1
2kB gzipped
Demo
➤ Install
$ yarn add bubbles-rising➤ Import
import BubblesRising from 'bubbles-rising';➤ Usage
const bubblesRising = new BubblesRising({
el: '.bubbles',
color: 'rgb(158, 128, 128)',
sizes: [2, 24],
shape: 'star',
angle: true,
});
bubblesRising.init();➤ Options
| Option | Type | Default | Description |
|---|---|---|---|
el | string \| HTMLElement | .bubbles | The container element for the animation. Can be a CSS selector (string) or an HTMLElement object. |
color | string | rgb(120, 200, 150) | The color of the particles in the animation. |
sizes | [number, number] | [4, 12] | The range of particle sizes, defined as an array where the first value is the minimum size and the second is the maximum size. |
shape | 'circle' \| 'square' \| 'triangle' \| 'star' | 'circle' | The shape of the particles. Options are 'circle', 'square', 'triangle', or 'star'. |
angle | boolean | false | Enables or disables rotation angles for the particles. |
➤ Methods
| Method | Parameters | Returns | Description |
|---|---|---|---|
init() | none | void | Initializes the canvas, sets up event listeners, and starts the animation loop. |
destroy() | none | void | Stops the animation, removes event listeners, clears the canvas, and releases resources. |
➤ License
bubbles-rising is released under MIT license