FIREWORKS/ROCKET
This script has been tested on and shown to work with Internet Explorer 5+, Netscape 6+, Firefox 1.0 and Opera 7+.
21-Nov-2005
: Improved to run more smoothly.
22-Sep-2005
: Updated to use new page width/scroll detection routines.
STEP 1:
Copy and paste the code below so that it sits between the <head> and </head> tags at the top of your web-page:
<script type="text/javascript"> // <![CDATA[ var bits=100; // how many bits var intensity=7; // how 'powerful' is the explosion (from 3 to 10 is best) var speed=20; // how fast - smaller is faster var colours=new Array("#03f", "#f03", "#0e0", "#93f", "#0cc", "#f93"); // blue red green purple cyan orange /**************************** * Fireworks Effect * *(c) 2004-6 mf2fm web-design* * http://www.mf2fm.com/rv * * DON'T EDIT BELOW THIS BOX * ****************************/ var dx, xpos, ypos, bangheight; var Xpos=new Array(); var Ypos=new Array(); var dX=new Array(); var dY=new Array(); var decay=new Array(); var colour=0; var swide=800; var shigh=600; function write_fire() { var b, s; b=document.createElement("div"); s=b.style; s.position="absolute"; b.setAttribute("id", "bod"); document.body.appendChild(b); set_scroll(); set_width(); b.appendChild(div("lg", 3, 4)); b.appendChild(div("tg", 2, 3)); for (var i=0; i<bits; i++) b.appendChild(div("bg"+i, 1, 1)); } function div(id, w, h) { var d=document.createElement("div"); d.style.position="absolute"; d.style.overflow="hidden"; d.style.width=w+"px"; d.style.height=h+"px"; d.setAttribute("id", id); return (d); } function bang() { var i, X, Y, Z, A=0; for (i=0; i<bits; i++) { X=Math.round(Xpos[i]); Y=Math.round(Ypos[i]); Z=document.getElementById("bg"+i).style; if((X>=0)&&(X<swide)&&(Y>=0)&&(Y<shigh)) { Z.left=X+"px"; Z.top=Y+"px"; } if ((decay[i]-=1)>14) { Z.width="3px"; Z.height="3px"; } else if (decay[i]>7) { Z.width="2px"; Z.height="2px"; } else if (decay[i]>3) { Z.width="1px"; Z.height="1px"; } else if (++A) Z.visibility="hidden"; Xpos[i]+=dX[i]; Ypos[i]+=(dY[i]+=1.25/intensity); } if (A!=bits) setTimeout("bang()", speed); } function stepthrough() { var i, Z; var oldx=xpos; var oldy=ypos; xpos+=dx; ypos-=4; if (ypos<bangheight||xpos<0||xpos>=swide||ypos>=shigh) { for (i=0; i<bits; i++) { Xpos[i]=xpos; Ypos[i]=ypos; dY[i]=(Math.random()-0.5)*intensity; dX[i]=(Math.random()-0.5)*(intensity-Math.abs(dY[i]))*1.25; decay[i]=Math.floor((Math.random()*16)+16); Z=document.getElementById("bg"+i).style; Z.backgroundColor=colours[colour]; Z.visibility="visible"; } bang(); launch(); } document.getElementById("lg").style.left=xpos+"px"; document.getElementById("lg").style.top=ypos+"px"; document.getElementById("tg").style.left=oldx+"px"; document.getElementById("tg").style.top=oldy+"px"; } function launch() { colour=Math.floor(Math.random()*colours.length); xpos=Math.round((0.5+Math.random())*swide*0.5); ypos=shigh-5; dx=(Math.random()-0.5)*4; bangheight=Math.round((0.5+Math.random())*shigh*0.4); document.getElementById("lg").style.backgroundColor=colours[colour]; document.getElementById("tg").style.backgroundColor=colours[colour]; } window.onscroll=set_scroll; function set_scroll() { var sleft, sdown; if (typeof(self.pageYOffset)=="number") { sdown=self.pageYOffset; sleft=self.pageXOffset; } else if (document.body.scrollTop || document.body.scrollLeft) { sdown=document.body.scrollTop; sleft=document.body.scrollLeft; } else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) { sleft=document.documentElement.scrollLeft; sdown=document.documentElement.scrollTop; } else { sdown=0; sleft=0; } var s=document.getElementById("bod").style; s.top=sdown+"px"; s.left=sleft+"px"; } window.onresize=set_width; function set_width() { if (typeof(self.innerWidth)=="number") { swide=self.innerWidth; shigh=self.innerHeight; } else if (document.documentElement && document.documentElement.clientWidth) { swide=document.documentElement.clientWidth; shigh=document.documentElement.clientHeight; } else if (document.body.clientWidth) { swide=document.body.clientWidth; shigh=document.body.clientHeight; } } window.onload=function() { if (document.getElementById) { set_width(); write_fire(); launch(); setInterval('stepthrough()', speed); }} // ]]> </script>
CLICK HERE
to select the above script ready to paste it into your clipboard
STEP 2:
If you wish, change the colours at the start of the script you just copied to be the colour of fireworks you require.
THAT'S IT
When your page loads, the fireworks should begin to explode on the screen, just like it is on this page.
No menu on the left?
Click here
for a full list of all the free DHTML and Javascript effects you could be using on your web-site!
[ This page viewed 591 times. Last viewed Fri 3 Jul, 2009 at 20:15 ]
