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