Author: | crashmax-dev |
---|---|
Views Total: | 53 views |
Official Page: | Go to website |
Last Update: | May 29, 2023 |
License: | MIT |
Preview:

Description:
fireworks-js is a JavaScript library that adds a configurable firework animation with sound effects to your webpage.
Supports Vanilla JavaScript, React, Preact, Vue, Solid, Svelte, Angular, and Lit.
See It In Action:
How to use it (Vanilla JavaScript):
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: { min: 50, max: 50 }, hue: { min: 0, max: 360 }, delay: { min: 0.015, max: 0.03 }, lineWidth: { explosion: { min: 1, max: 3 }, trace: { min: 1, max: 2 } }, lineStyle: 'round', speed: 2, acceleration: 1.05, friction: 0.95, gravity: 1.5, particles: 50, traceLength: 3, flickering: 50 opacity: 0.5, explosion: 5, intensity: 30, traceSpeed: 10, autoresize: true, brightness: { min: 50, max: 80 }, decay = { min: 0.015, max: 0.03 }, mouse: { click: false, move: false, max: 1 } boundaries: { x: 50, y: 50, width: 0, height: 0 } sound: { enable: true, files: [ 'explosion0.mp3', 'explosion1.mp3', 'explosion2.mp3' ], volume: { min: 4, max: 8 }, } });
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.
// update options fireworks.updateOptions(options); // update canvas size fireworks.updateSize(sizesObject); // update canvas boundaries fireworks.updateBoundaries(boundaries); // asynchronous stopping of the fireworks fireworks.waitStop(dispose); // // launch a specified number of fireworks fireworks.launch(count);
Changelog:
v2.10.5 (05/29/2023)
- feat(svelte): enable reactivity of options via svelte action
v2.10.4 (05/06/2023)
- feat(react): add “use client” to build output
v2.10.3 (04/17/2023)
- fix: changing options update ordering in Fireworks constructor
v2.10.2 (02/16/2023)
- update
v2.10.1 (01/06/2023)
- update
v2.10.0 (12/04/2022)
- feat: options are no longer singleton
v2.9.0 (11/16/2022)
- feat: added launch method
v2.8.0 (11/04/2022)
- chore: refactor wrappers
v2.7.0 (11/04/2022)
- feat(packages/vue): improve vue wrapper
v2.6.0 (11/02/2022)
- update
v2.5.1 (10/16/2022)
- renamed option trace to traceLength
v2.5.0 (10/16/2022)
- renamed option trace to traceLength
v2.4.0 (10/15/2022)
- feat: raf fps property
v2.3.2 (10/15/2022)
- use pointer events
v2.3.1 (10/13/2022)
- refactor
v2.3.0 (10/04/2022)
- refactor
v2.2.1 (10/04/2022)
- feat: reduce size with esnext target
v2.2.0 (10/03/2022)
- feat: added waitStop
v2.1.0 (10/03/2022)
- feat: dispose canvas after stop
- feat: added useImperativeHandle for react, preact packages
v2.0.1 (08/14/2022)
- fix(packages/react): canvas will be added twice in react18 development env
- feat(packages): added web-components
- Bugfix/mouse and resize listeners
07/16/2022
- v2.0.0: API updated
07/15/2022
- v1.4.1: fix: event listeners not removed in unmount
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