Fireworks Animation Using JavaScript and CSS

Inspired by the Forth of July, I wanted to see if I could simulate a fireworks display using CSS and JavaScript.  After googling fireworks animation using CSS, I noticed that many people have done this.  This is my version.  As my kids told me, it should be more dramatic, and if I play with it some more I’m sure it could be.  However, this achieves the look I was going for, and I can always add to it later.
The background for this fireworks display is a night time beach image.  Where I live many people go down to the beach to watch the fireworks, so this looks familiar to me.

Animating the firework blast

When the page loads a call to a function that creates a <div> element 3 pixels by 3 pixels and positions it at a random point within range of the image size.  The color is chosen randomly from an array of 10 colors.  Then 20 copies of the <div> element are created, and given a randomly generated offset position within a range.  The first animate function moves each copy to the new position, and the second animate function causes each spark to drop down and fade out, like a real firework.

Animating the multi-colored firework

The color of the  original <div> element is chosen by randomly generating a number between 1 and 5.  This is the index number of an array of 10 colors.  Multi-colored fireworks are generated when the index of the color array is greater than 5.  If so, each copy of the <div> element is given a new randomly generated color.  Then the offsets and fade outs are animated.

Things I learned

  • I didn’t want a whole bunch of old elements hanging around after a firework burst, so I put a deconstructor function at the beginning of the explosion function to remove all the the old sparks before creating new ones.
  • There are a whole bunch of cool web safe colors you can reference by name. I link to this in another post.  Link to List