Animated Fireworks and Rocket Explosion effect :: RV's free DHTML and JavaScript text and graphic scripts

FIREWORKS/ROCKET
This script has been tested on and shown to work with the following browsers: Internet Explorer version 7 and above Google Chrome version 4 and above Mozilla Firefox version 2 and above Apple Safari version 5 and above Opera version 9 and above (including Opera mobile) Android Browser version 3 and above
16-Dec-2011: Completely revised. Made much faster, added multiple rockets and multi-colour explosions. 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=80; // how many bits var speed=33; // how fast - smaller is faster var bangs=5; // how many can be launched simultaneously (note that using too many can slow the script down) var colours=new Array("#03f", "#f03", "#0e0", "#93f", "#0cf", "#f93", "#f0c"); // blue red green purple cyan orange pink /**************************** * Fireworks Effect * (c)2004-11 mf2fm web-design * http://www.mf2fm.com/rv * * DON'T EDIT BELOW THIS BOX * ***************************/ var bangheight=new Array(); var intensity=new Array(); var colour=new Array(); var Xpos=new Array(); var Ypos=new Array(); var dX=new Array(); var dY=new Array(); var stars=new Array(); var decay=new Array(); var swide=800; var shigh=600; var boddie; window.onload=function() { if (document.getElementById) { var i; boddie=document.createElement("div"); boddie.style.position="fixed"; boddie.style.top="0px"; boddie.style.left="0px"; boddie.style.overflow="visible"; boddie.style.width="1px"; boddie.style.height="1px"; boddie.style.backgroundColor="transparent"; document.body.appendChild(boddie); set_width(); for (i=0; i<bangs; i++) { write_fire(i); launch(i); setInterval('stepthrough('+i+')', speed); } }} function write_fire(N) { var i, rlef, rdow; stars[N+'r']=createDiv('\|', 12); boddie.appendChild(stars[N+'r']); for (i=bitsN; i<bits+bitsN; i++) { stars[i]=createDiv('', 13); boddie.appendChild(stars[i]); } } function createDiv(char, size) { var div=document.createElement("div"); div.style.font=size+"px monospace"; div.style.position="absolute"; div.style.backgroundColor="transparent"; div.appendChild(document.createTextNode(char)); return (div); } function launch(N) { colour[N]=Math.floor(Math.random()colours.length); Xpos[N+"r"]=swide0.5; Ypos[N+"r"]=shigh-5; bangheight[N]=Math.round((0.5+Math.random())shigh0.4); dX[N+"r"]=(Math.random()-0.5)swide/bangheight[N]; if (dX[N+"r"]>1.25) stars[N+"r"].firstChild.nodeValue="/"; else if (dX[N+"r"]<-1.25) stars[N+"r"].firstChild.nodeValue="\\"; else stars[N+"r"].firstChild.nodeValue="\|"; stars[N+"r"].style.color=colours[colour[N]]; } function bang(N) { var i, Z, A=0; for (i=bitsN; i<bits+bitsN; i++) { Z=stars[i].style; Z.left=Xpos[i]+"px"; Z.top=Ypos[i]+"px"; if (decay[i]) decay[i]--; else A++; if (decay[i]==15) Z.fontSize="7px"; else if (decay[i]==7) Z.fontSize="2px"; else if (decay[i]==1) Z.visibility="hidden"; Xpos[i]+=dX[i]; Ypos[i]+=(dY[i]+=1.25/intensity[N]); } if (A!=bits) setTimeout("bang("+N+")", speed); } function stepthrough(N) { var i, M, Z; var oldx=Xpos[N+"r"]; var oldy=Ypos[N+"r"]; Xpos[N+"r"]+=dX[N+"r"]; Ypos[N+"r"]-=4; if (Ypos[N+"r"]<bangheight[N]) { M=Math.floor(Math.random()3colours.length); intensity[N]=5+Math.random()4; for (i=Nbits; i<bits+bitsN; i++) { Xpos[i]=Xpos[N+"r"]; Ypos[i]=Ypos[N+"r"]; dY[i]=(Math.random()-0.5)intensity[N]; dX[i]=(Math.random()-0.5)(intensity[N]-Math.abs(dY[i]))1.25; decay[i]=16+Math.floor(Math.random()16); Z=stars[i]; if (M<colours.length) Z.style.color=colours[i%2?colour[N]:M]; else if (M<2*colours.length) Z.style.color=colours[colour[N]]; else Z.style.color=colours[i%colours.length]; Z.style.fontSize="13px"; Z.style.visibility="visible"; } bang(N); launch(N); } stars[N+"r"].style.left=oldx+"px"; stars[N+"r"].style.top=oldy+"px"; } window.onresize=set_width; function set_width() { var sw_min=999999; var sh_min=999999; if (document.documentElement && document.documentElement.clientWidth) { if (document.documentElement.clientWidth>0) sw_min=document.documentElement.clientWidth; if (document.documentElement.clientHeight>0) sh_min=document.documentElement.clientHeight; } if (typeof(self.innerWidth)!="undefined" && self.innerWidth) { if (self.innerWidth>0 && self.innerWidth<sw_min) sw_min=self.innerWidth; if (self.innerHeight>0 && self.innerHeight<sh_min) sh_min=self.innerHeight; } if (document.body.clientWidth) { if (document.body.clientWidth>0 && document.body.clientWidth<sw_min) sw_min=document.body.clientWidth; if (document.body.clientHeight>0 && document.body.clientHeight<sh_min) sh_min=document.body.clientHeight; } if (sw_min==999999 \|\| sh_min==999999) { sw_min=800; sh_min=600; } swide=sw_min; shigh=sh_min; } // ]]> </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!

Link directly to this page: http://www.mf2fm.com/rv/dhtmlfireworks.php

This page viewed 2123 times. Last viewed Thu 24 May, 2012 at 02:39