Saturday, June 7, 2008

Display fireworks effect on your website using Javascript

Celebrations are often accompanied by fireworks. Whether it's New Year's eve or World Cup final or something personal like a wedding or birthday. Why should then, your website not have any? Before you continue this article, I want you to first have a glimpse of the effect in this demo.

Impressive, isn't it? This firework was created using Fireworks.js coded by Scott Schiller. Visit Fireworks.js and look at the various effects that you can generate by moving the sliders and clicking on Fire. Download the JavaScript and after you have finished playing with the sliders, return back here for the tutorial.

Alright, so here is how to implement it on your website.

Extract the contents of the zip file. Inside there are several folders and files, but we will require only three. Upload the following files to your server -

images/particles.gif
script/fireworks.js
style/fireworks.css

There is also a sound manager, but we will omit that.

Now include the following lines before the </head> tag on your page.

<link rel="stylesheet" type="text/css" href="style/fireworks.css" media="screen" />
<script type="text/javascript" src="script/fireworks.js"></script>

Now inside the <body> of the page, include the following lines:

<div id="fireworks-template">
<div id="fw" class="firework"></div>
<div id="fp" class="fireworkParticle"><img src="image/particles.gif" alt="" /></div>
</div>

<div id="fireContainer"></div>

Now comes the actual part of calling the JavaScript function that will create the fireworks. The syntax of the function is such:

createFirework (Radius, Particles, Circles, burstType, startX, startY, burstX, burstY, Randomize explosion pattern, Obey window boundaries)

Radius is the radius of the explosion (value 1-100)
Particles is the number of particles per explosion (value 1-200)
Circles is the number of concentric circles in the explosion (value 1-8)
BurstType indicates the primary color of the explosion (value 1-7)
StartX is the originating X axis of the explosion
StartY is the originating Y axis of the explosion
BurstX is the detonation X axis
BurstY is the detonation Y axis

By adjusting the values of this variables, you can create different patterns. Some examples are already included in the zip file you downloaded.

A sample function code looks like this:

createFirework(95,101,3,1,null,null,null,null,false,true);

To launch fireworks automatically when the page loads, use this code

<script type="text/javascript">
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}
addLoadEvent(function() {
PUT FUNCTION CODE HERE
});
</script>

To launch fireworks when clicked on a link, use this code

<a href="#" onclick="PUT FUNCTION CODE HERE INCLUDING THE QUOTATION MARKS" >Click Here</a>

Have fun!

4 comments:

  1. The Process you explained above is not working in IE

    ReplyDelete
  2. I just checked it and it's working in IE8 and even in IE6. It's likely to work in IE7 too.

    ReplyDelete
  3. works for ff, but automatic launch doesn't work -.-

    ReplyDelete