https://github.com/vitorluizc/bubbles-animation

Simple <canvas> bubbles animation.
https://github.com/vitorluizc/bubbles-animation

canvas

Last synced: 7 days ago
JSON representation

Simple <canvas> bubbles animation.

• Host: GitHub
• URL: https://github.com/vitorluizc/bubbles-animation
• Owner: VitorLuizC
• License: mit
• Created: 2017-09-07T04:01:26.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2022-12-07T04:26:42.000Z (almost 2 years ago)
• Last Synced: 2024-10-13T02:51:44.053Z (about 1 month ago)
• Topics: canvas
• Language: TypeScript
• Homepage: https://codepen.io/VitorLuizC/pen/EwVPeP
• Size: 263 KB
• Stars: 4
• Watchers: 3
• Forks: 0
• Open Issues: 15
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# Bubbles Animation

Simple `` bubbles animation.

See this [demo][1].

## Getting Started

- Install from NPM;

```shell

npm install --save-dev bubbles-animation

```

- On your page's script just use the animate function passing a ``

  element or a selector to get it.

```js

import animate from 'bubbles-animation';

animate(document.querySelector('canvas'), {

  quantity: 1, // {Range} define quantity bubbles generated on each tick animation.

  interval: 3, // {number} Interval to tick animation. Skip this frame to generate bubbles.

  size: [5, 50], // {Range} define bubbles size.

  color: { // { A: Range, G: Range, B: Range, A: Range } Define bubbles color.

    R: 0,

    G: [125, 255],

    B: [125, 255],

    A: .65

  }

});

```

## Changelog

Detailed changes for each release are documented in the [release notes][0].

[0]: https://github.com/VitorLuizC/bubbles-animation/releases

[1]: https://codepen.io/VitorLuizC/pen/EwVPeP