bubbles-rising

bubbles-rising

^{The BubblesRising class is designed to create an animation of bubbles that rise and gradually disappear over time. It dynamically generates particles, controls their movement and opacity, and adjusts the canvas size when the container is resized. The class ensures smooth animation updates using requestAnimationFrame. It supports customization options such as bubble color and size range and includes methods for initialization, updating, rendering, and resource cleanup.}

^{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