Saturday, December 29, 2012

Animating the DOM: A New Year's Fireworks Effect

It's the end of the year and I'm in the mood to celebrate with some fireworks. However, instead of spending the money on real fireworks, I prefer to challenge myself and simulate them in the browser. My initial idea was to construct them using CSS3 3D transforms. The effect is nice and works well, however, only in Chrome. While Firefox may support 3D transforms, it certainly can not handle several hundred DIVs being transformed and animated without severe choppiness. So, in addition to a 3D version, I faked the 3D by creating several layers - each representing part of the sphere created by the firework exploding outward. Both version are on my sandbox for comparison [CSS3 3D version | Layered Version].

In my next post, I'll delve into how the 3D version works. For now, enjoy the show!