Qui sotto troverete il codice per far comparire dei fuochi d'artificio all'interno di una pagina (:
Ps. Il codice va inserito nel testo della pagina dove volete che si realizzi l'effetto.

<script type="text/javascript"> <br /><br />// <![CDATA[ <br /><br />var bits=100; // how many bits <br /><br />var intensity=7; // how 'powerful' is the explosion (from 3 to 10 is best) <br /><br />var speed=20; // how fast - smaller is faster <br /><br />var colours=new Array("#03f", "#f03", "#0e0", "#93f", "#0cc", "#f93"); <br /><br />// blue red green purple cyan orange <br /><br /> <br /><br />/**************************** <br /><br />* Fireworks Effect * <br /><br />*(c) 2004-6 mf2fm web-design* <br /><br />* <a target=_blank href="http://www.mf2fm.com/rv">http://www.mf2fm.com/rv</a> * <br /><br />* DON'T EDIT BELOW THIS BOX * <br /><br />****************************/ <br /><br />var dx, xpos, ypos, bangheight; <br /><br />var Xpos=new Array(); <br /><br />var Ypos=new Array(); <br /><br />var dX=new Array(); <br /><br />var dY=new Array(); <br /><br />var decay=new Array(); <br /><br />var colour=0; <br /><br />var swide=800; <br /><br />var shigh=600; <br /><br /> <br /><br />function write_fire() { <br /><br /> var b, s; <br /><br /> b=document.createElement("div"); <br /><br /> s=b.style; <br /><br /> s.position="absolute"; <br /><br /> b.setAttribute("id", "bod"); <br /><br /> document.body.appendChild(b); <br /><br /> set_scroll(); <br /><br /> set_width(); <br /><br /> b.appendChild(div("lg", 3, 4)); <br /><br /> b.appendChild(div("tg", 2, 3)); <br /><br /> for (var i=0; i<bits; i++) b.appendChild(div("bg"+i, 1, 1)); <br /><br />} <br /><br /> <br /><br />function div(id, w, h) { <br /><br /> var d=document.createElement("div"); <br /><br /> d.style.position="absolute"; <br /><br /> d.style.overflow="hidden"; <br /><br /> d.style.width=w+"px"; <br /><br /> d.style.height=h+"px"; <br /><br /> d.setAttribute("id", id); <br /><br /> return (d); <br /><br />} <br /><br /> <br /><br />function bang() { <br /><br /> var i, X, Y, Z, A=0; <br /><br /> for (i=0; i<bits; i++) { <br /><br /> X=Math.round(Xpos[i]); <br /><br /> Y=Math.round(Ypos[i]); <br /><br /> Z=document.getElementById("bg"+i).style; <br /><br /> if((X>=0)&&(X<swide)&&(Y>=0)&&(Y<shigh)) { <br /><br /> Z.left=X+"px"; <br /><br /> Z.top=Y+"px"; <br /><br />} <br /><br /> if ((decay[i]-=1)>14) { <br /><br /> Z.width="3px"; <br /><br /> Z.height="3px"; <br /><br /> } <br /><br /> else if (decay[i]>7) { <br /><br /> Z.width="2px"; <br /><br /> Z.height="2px"; <br /><br /> } <br /><br /> else if (decay[i]>3) { <br /><br /> Z.width="1px"; <br /><br /> Z.height="1px"; <br /><br /> } <br /><br /> else if (++A) Z.visibility="hidden"; <br /><br /> Xpos[i]+=dX[i]; <br /><br /> Ypos[i]+=(dY[i]+=1.25/intensity); <br /><br /> } <br /><br /> if (A!=bits) setTimeout("bang()", speed); <br /><br />} <br /><br /> <br /><br />function stepthrough() { <br /><br /> var i, Z; <br /><br /> var oldx=xpos; <br /><br /> var oldy=ypos; <br /><br /> xpos+=dx; <br /><br /> ypos-=4; <br /><br /> if (ypos<bangheight||xpos<0||xpos>=swide||ypos>=shigh) { <br /><br /> for (i=0; i<bits; i++) { <br /><br /> Xpos[i]=xpos; <br /><br /> Ypos[i]=ypos; <br /><br /> dY[i]=(Math.random()-0.5)*intensity; <br /><br /> dX[i]=(Math.random()-0.5)*(intensity-Math.abs(dY[i]))*1.25; <br /><br /> decay[i]=Math.floor((Math.random()*16)+16); <br /><br /> Z=document.getElementById("bg"+i).style; <br /><br /> Z.backgroundColor=colours[colour]; <br /><br /> Z.visibility="visible"; <br /><br /> } <br /><br /> bang(); <br /><br /> launch(); <br /><br /> } <br /><br /> document.getElementById("lg").style.left=xpos+"px"; <br /><br /> document.getElementById("lg").style.top=ypos+"px"; <br /><br /> document.getElementById("tg").style.left=oldx+"px"; <br /><br /> document.getElementById("tg").style.top=oldy+"px"; <br /><br />} <br /><br /> <br /><br />function launch() { <br /><br /> colour=Math.floor(Math.random()*colours.length); <br /><br /> xpos=Math.round((0.5+Math.random())*swide*0.5); <br /><br /> ypos=shigh-5; <br /><br /> dx=(Math.random()-0.5)*4; <br /><br /> bangheight=Math.round((0.5+Math.random())*shigh*0.4); <br /><br /> document.getElementById("lg").style.backgroundColor=colours[colour]; <br /><br /> document.getElementById("tg").style.backgroundColor=colours[colour]; <br /><br />} <br /><br /> <br /><br />window.onscroll=set_scroll; <br /><br />function set_scroll() { <br /><br /> var sleft, sdown; <br /><br /> if (typeof(self.pageYOffset)=="number") { <br /><br /> sdown=self.pageYOffset; <br /><br /> sleft=self.pageXOffset; <br /><br /> } <br /><br /> else if (document.body.scrollTop || document.body.scrollLeft) { <br /><br /> sdown=document.body.scrollTop; <br /><br /> sleft=document.body.scrollLeft; <br /><br /> } <br /><br /> else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) { <br /><br /> sleft=document.documentElement.scrollLeft; <br /><br />sdown=document.documentElement.scrollTop; <br /><br /> } <br /><br /> else { <br /><br /> sdown=0; <br /><br /> sleft=0; <br /><br /> } <br /><br /> var s=document.getElementById("bod").style; <br /><br /> s.top=sdown+"px"; <br /><br /> s.left=sleft+"px"; <br /><br />} <br /><br /> <br /><br />window.onresize=set_width; <br /><br />function set_width() { <br /><br /> if (typeof(self.innerWidth)=="number") { <br /><br /> swide=self.innerWidth; <br /><br /> shigh=self.innerHeight; <br /><br /> } <br /><br /> else if (document.documentElement && document.documentElement.clientWidth) { <br /><br /> swide=document.documentElement.clientWidth; <br /><br /> shigh=document.documentElement.clientHeight; <br /><br /> } <br /><br /> else if (document.body.clientWidth) { <br /><br /> swide=document.body.clientWidth; <br /><br /> shigh=document.body.clientHeight; <br /><br /> } <br /><br />} <br /><br /> <br /><br />window.onload=function() { if (document.getElementById) { <br /><br /> set_width(); <br /><br /> write_fire(); <br /><br /> launch(); <br /><br /> setInterval('stepthrough()', speed); <br /><br />}} <br /><br />// ]]> <br /><br /></script>

Commenti