bubbles-rising
TypeScript icon, indicating that this package has built-in type declarations

3.0.1 • Public • Published

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.

npm GitHub package version NPM Downloads

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

Package Sidebar

Install

npm i bubbles-rising

Weekly Downloads

2

Version

3.0.1

License

MIT

Unpacked Size

82 kB

Total Files

15

Last publish

Collaborators

  • ux-ui