Would you like to display a fireworks effect on your web page? What about a simple JavaScript one that doesn't use any images that can be attached to any page with a simple script tag? If you answered "yes" then you have come to the right place. Note that the effect doesn't look so good on a light background - after all who sets off fireworks in the daytime. It looks far better on a darker background.

This latest version of my fireworks script is almost completely unobtrusive. The only part of the script in the global scope are the ids that are attached to all of the div tags used to create the fireworks effects from within the script and all of those use the same prefix that is defined as the second parameter passed to the anonymous function wrapped around the script so in the remote circumstance where you need other ids to have the same prefix you can simply change the prefix used by the script. If you want the effect to stop after a specified number of minutes then all you need to do is to replace the zero that is the first parameter passed into the function at the end of the script with the number of minutes you want it to run for. Yes you have my permission to change one or both of these parameters set at the very end of the script in order to either limit the time the effect runs for or to change the ids so they don't clash with those elsewhere in the web page.

To use this script simply copy the following and save it as a file called fireworks.js.


You then simply attach the script to the bottom of your web page to have the fireworks display on your page. As you can easily see, it looks better with a darker background rather than a lighter one so it isn't appropriate for every site.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow