Author: | crashmax-dev |
---|---|
Views Total: | 566 views |
Official Page: | Go to website |
Last Update: | May 1, 2022 |
License: | MIT |
Preview:

Description:
fireworks-js is a JavaScript library that adds a configurable firework animation with sound effects to your webpage.
See It In Action:
How to use it:
1. Install and import the fireworks-js as an ES module.
# Yarn $ yarn add fireworks-js # NPM $ npm i fireworks-js import { Fireworks } from 'fireworks-js'
2. Or load the fireworks.js JavaScript library from the dist
folder.
<script src="dist/fireworks.js"></script>
3. Create a container on which you want to render the firework animation.
<div class="fireworks-example"></div>
4. Initialize the fireworks-js library on the container element and config the firework animation using the following props.
const container = document.querySelector('..fireworks-example') const fireworks = new Fireworks(container, { rocketsPoint: 50, hue: { min: 0, max: 360 }, delay: { min: 15, max: 30 }, speed: 2, acceleration: 1.05, friction: 0.95, gravity: 1.5, particles: 50, trace: 3, explosion: 5, intensity: 30, autoresize: true, brightness: { min: 50, max: 80, decay: { min: 0.015, max: 0.03 } } mouse: { click: false, move: false, max: 3 } boundaries: { x: 50, y: 50, width: container.clientWidth, height: container.clientHeight } sound: { enable: true, files: [ 'explosion0.mp3', 'explosion1.mp3', 'explosion2.mp3' ], volume: { min: 1, max: 2 }, } });
5. Start the firework animation.
fireworks.start();
6. Pause the firework animation.
fireworks.pause()
7. Stop the firework animation.
fireworks.stop()
8. Clear the firework animation.
fireworks.clear()
9. More API methods.
// change canvas size fireworks.setSize({ height: 500, width: 500 }) // update options fireworks.setOptions('delay', { min: 10, max: 15 }) // show/hide boundaries fireworks.visibleBoudaries() // set the boundaries of fireworks fireworks.setBoudaries()
Changelog:
05/01/2022
- v1.4.0: Various changes and improvements; Add intensity option
11/19/2021
- v1.3.5: add experimental explosion
11/17/2021
- v1.3.4: update
11/10/2021
- v1.3.3: refactor sounds
10/19/2021
- v1.2.3
10/16/2021
- v1.2.2
07/28/2021
- v1.2.1: Updated options and methods.
07/04/2021
- v1.2.0
06/28/2021
- v1.1.4