Jump to content
xisto Community
Sign in to follow this  
wlaudlim

How To Make Firework Effect.. the way to make firework effect on web

Recommended Posts

this is java script source to make firework effect on webpage..

 

Put this source at body.

 

<script language="JavaScript">

<!-- IE4+, NS4+, NS6 Fireworks script by kurt.grigg@virgin.net

CL=new Array('#ff0000','#00ff00','#ffffff','#ff00ff','#ffa500','#ffff00','#00ff00','#ffffff','#ff00ff')

CL2=new Array('#ffa500','#00ff00','#ffaaff','#fff000','#ffffff')

Xpos=130;

Ypos=130;

I='#00ff00';

C=0;

S=5;

H=null;

W=null;

Y=null;

NS4=(document.layers);

NS6=(document.getElementById&&!document.all);

IE4=(document.all);

A=14;

E=120;

L=null;

if (NS4){

for (i=0; i < A; i++)

document.write('<LAYER NAME="nsstars'+i+'" TOP=0 LEFT=0 BGCOLOR='+I+' CLIP="0,0,2,2"></LAYER>');

}

if (NS6){

window.document.body.style.overflow='hidden';

for (i=0; i < A; i++)

document.write('<div id="ns6stars'+i+'" style="position:absolute;top:0px;left:0px;height:2px;width:2px;font-size:2px;background:'+I+'"></div>');

}

if (IE4){

document.write('<div id="ie" style="position:absolute;top:0px;left:0px"><div style="position:relative">');

for (i=0; i < A; i++)

document.write('<div id="iestars" style="position:absolute;top:0;left:0;width:2px;height:2px;background:'+I+';font-size:2px"></div>');

document.write('</div></div>');

}

function Fireworks(){

H=(NS4||NS6)?window.innerHeight:window.document.body.clientHeight;

W=(NS4||NS6)?window.innerWidth:window.document.body.clientWidth;

Y=(NS4||NS6)?window.pageYOffset:window.document.body.scrollTop;

for (i=0; i < A; i++){

if (IE4)L=iestars.style;

if (NS4)L=document.layers["nsstars"+i];

if (NS6)L=document.getElementById("ns6stars"+i).style;

var F=Math.floor(Math.random()*CL.length);

var RS=Math.round(Math.random()*2);

L.top = Ypos + E*Math.sin((C+i*5)/3)*Math.sin(C/100)

L.left= Xpos + E*Math.cos((C+i*5)/3)*Math.sin(C/100)

if (C < 110){

if (NS4){L.bgColor=I;L.clip.width=1;L.clip.height=1}

if (IE4||document.getElementById)

{L.background=I;L.width=1;L.height=1;L.fontSize=1}

}

else{

if (NS4){L.bgColor=CL[F];L.clip.width=RS;L.clip.height=RS}

if (IE4||document.getElementById){L.background=CL[F];L.width=RS;L.height=RS;L.fontSize=RS}

}

}

if (C > 220){

C=0;

var NC=Math.floor(Math.random()*CL2.length);

I=CL2[NC];

E=Math.round(100+Math.random()*50);

Ypos = E+Math.round(Math.random()*(H-(E*2.2)))+Y;

Xpos = E+Math.round(Math.random()*(W-(E*2.2)));

}

C+=S;

setTimeout("Fireworks()",10);

}

Fireworks();

// -->

</script>

 

of course you can change colors

Share this post


Link to post
Share on other sites

Nice... pretty neat. Can you make it a bit more dense? Like instead of single dots in a perfect circle, a bit more thick?

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.