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