ManyCodes.com – codes & scripts Get free programming codes and tutorials!

29Jul/090

Have fancy exploding stars on your website

Here is how you can have fancy exploding stars on your website.

Put the code below within your site's source code. If you dont know how to implement this code into your site, please goto how to implement the code to your website

Code:

<!-- this script is from www.manycodes.com -->
<script LANGUAGE="JavaScript1.2">
<!--


//set Interval between each firework display,
var intervals=2000
var sparksOn     = true;
var speed        = 25;
var power        = 1;

//Dont change these values-------
var documentWidth=documentHeight=randomx=randomy=leftcorner=topcorner=0
var ns=(document.layers);
var ie=(document.all);
var sparksAflyin = false;
var allDivs      = new Array(10);
var totalSparks  = 0;
//-------------------------------

function initAll(){
 if(!ns && !ie){
 sparksOn = false;
 return;
 }
setInterval("firework()",intervals)

if (ns)
 document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE);
 for(dNum=0; dNum<7; ++dNum){
 if(ie)
 allDivs[dNum]=eval('document.all.sDiv'+dNum+'.style');
 else
 allDivs[dNum]=eval('document.layers["sDiv'+dNum+'"]');
 }
}

function firework(){
//below code detects the browser dimenions
if (ie){
documentWidth=document.body.clientWidth
documentHeight=document.body.clientHeight
leftcorner=document.body.scrollLeft
topcorner=document.body.scrollTop
}
else if (ns){
documentWidth=window.innerWidth
documentHeight=window.innerHeight
leftcorner=pageXOffset
topcorner=pageYOffset

}
//below code randomly generates a set of coordinates that fall within the dimension
randomx=leftcorner+Math.floor(Math.random()*documentWidth)
randomy=topcorner+Math.floor(Math.random()*documentHeight)


 if(sparksOn){
 if(!sparksAflyin){
 sparksAflyin=true;
 totalSparks=0;
 for(var spark=0;spark<=6;spark++){
 dx=Math.round(Math.random()*50);
 dy=Math.round(Math.random()*50);
 moveTo(spark,randomx,randomy,dx,dy);
 }
 }
 }
}

function moveTo(i,tempx,tempy,dx,dy){
 if(ie){
 if(tempy+80>(document.body.offsetHeight+document.body.scrollTop))
 tempy=document.body.offsetHeight+document.body.scrollTop-80;
 if(tempx+80>(document.body.offsetWidth+document.body.scrollLeft))
 tempx=document.body.offsetWidth+document.body.scrollLeft-80;
 }
 if(tempx>-50&&tempy>-50){
 tempx+=dx;tempy+=dy;
 allDivs[i].left=tempx;
 allDivs[i].top=tempy;
 dx-=power;dy-=power;
 setTimeout("moveTo("+i+","+tempx+","+tempy+","+dx+","+dy+")",speed)
 }
 else
 ++totalSparks
 if(totalSparks==7){
 sparksAflyin=false;
 totalSparks=0;
 }
}
window.onload=initAll
//End-->
</script>
<style>
#sDiv0 {position:absolute; height:1; width:1; font-family:arial black; font-size:25px; color:Aqua;}
#sDiv1 {position:absolute; height:1; width:1; font-family:arial black; font-size:22px; color:red;}
#sDiv2 {position:absolute; height:1; width:1; font-family:arial black; font-size:20px; color:blue;}
#sDiv3 {position:absolute; height:1; width:1; font-family:arial black; font-size:15px; color:orange;}
#sDiv4 {position:absolute; height:1; width:1; font-family:arial black; font-size:25px; color:yellow;}
#sDiv5 {position:absolute; height:1; width:1; font-family:arial black; font-size:25px; color:lightgreen;}
#sDiv6 {position:absolute; height:1; width:1; font-family:arial black; font-size:20px; color:silver;}
</style>
<p></p>
<div id="sDiv0">
 *</div>
<div id="sDiv1">
 *</div>
<div id="sDiv2">
 *</div>
<div id="sDiv3">
 *</div>
<div id="sDiv4">
 *</div>
<div id="sDiv5">
 *</div>
<div id="sDiv6">
 *</div><font face="Tahoma"><a target="_blank" href="http://www.manycodes.com/category/java/javascript-codes/"><span style="font-size: 8pt; text-decoration: none">JavaScript Free Code</span></a></font>



Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Webnews
  • Digg
  • del.icio.us
  • StumbleUpon
  • Reddit
  • Ask
  • Facebook
  • Technorati
  • YahooBuzz