A Simple Fireworks Animation With JavaScript | fireworks-js

fireworks-js is a JavaScript library that adds configurable fireworks animations with sound effects to your webpage.

How to make use of 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 need to render the firework animation.

<div class="fireworks-example"></div>

4. Initialize the fireworks-js library on the container factor and config the firework animation utilizing the next props.

const fireworks = new Fireworks({
      target: document.querySelector('.fireworks-example'),
      hue: 120,
      startDelay: 1,
      minDelay: 20,
      maxDelay: 30,
      speed: 5,
      acceleration: 1.15,
      friction: 0.88,
      gravity: 1,
      particles: 65,
      trace: 3,
      explosion: 6,
      boundaries: {
        top: 70,
        bottom: container.clientHeight,
        left: 70,
        right: container.clientWidth
      },
      sound: {
        enable: true,
        list: [
          'explosion0.mp3',
          'explosion1.mp3',
          'explosion2.mp3'
        ],
        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()

API

.start()

Start fireworks.

.stop()

Stop fireworks.

.pause()

Start/stop fireworks.

.clear()

Cleaning the canvas from fireworks.

.updateOptions(options)

Force update fireworks options.
Type: options

.updateSize(sizes)

Force update canvas size.
Type: sizes

.updateBoundaries(boundaries)

Force update canvas boundaries.
Type: boundaries

Options

Note
The options is optional, as are each of its properties.

PropertyTypeDefault
hueobjecthue
rocketsPointobjectrocketsPoint
mouseobjectmouse
boundariesobjectboundaries
soundobjectsound
delayobjectdelay
brightnessobjectbrightness
decayobjectdecay
lineWidthobjectlineWidth
lineStylestringround
explosionnumber5
opacitynumber0.5
accelerationnumber1.05
frictionnumber0.95
gravitynumber1.5
particlesnumber50
tracenumber3
flickeringnumber50
intensitynumber30
traceSpeednumber10
intensitynumber30
autoresizebooleantrue

Firework Animation Canvas, Fireworks.js Plugin/Github, javascript explosion animation, javascript fireworks background, svg fireworks animation, how to make fireworks in javascript


See Demo And Download

Official Website(crashmax-off): Click Here

This superior jQuery/javascript plugin is developed by crashmax-off. For extra Advanced usage, please go to the official website.

Share