Script Categories













Background Effects >>> Fireworks.

Produces a multi-colored fireworks display as the background of the page.

Add the below code to the <BODY> section of your page:

<div align="center" id="starsDiv" style="position:absolute;top:0px;left:0px">
<
div style="position:relative;width:2px;height:2px;background:#ffffff;font-size:2px">9</div>
<
div style="position:relative;width:1px;height:1px;background:#fff000;font-size:1px">9</div>
<
div style="position:relative;width:1px;height:1px;background:#ffa000;font-size:1px">9</div>
<
div style="position:relative;width:1px;height:1px;background:#ff00ff;font-size:1px">9</div>
<
div style="position:relative;width:1px;height:1px;background:#00ff00;font-size:1px">9</div>
<
div style="position:relative;width:1px;height:1px;background:#0000ff;font-size:1px">9</div>
<
div style="position:relative;width:1px;height:1px;background:#FF0000;font-size:1px">9</div>
<
div style="position:relative;width:1px;height:1px;background:#ffffff;font-size:1px">9</div>
<
div style="position:relative;width:1px;height:1px;background:#fff000;font-size:1px">9</div>
<
div style="position:relative;width:1px;height:1px;background:#ffa000;font-size:1px">9</div>
<
div style="position:relative;width:1px;height:1px;background:#ff00ff;font-size:1px">9</div>
<
div style="position:relative;width:2px;height:2px;background:#ff00ff;font-size:2px">9</div>
<
div style="position:relative;width:1px;height:1px;background:#0000ff;font-size:1px">9</div>
<
div style="position:relative;width:1px;height:1px;background:#FF0000;font-size:1px">9</div>
<
/div>

<SCRIPT LANGUAGE="JavaScript">
<!-- Original:  Kurt Grigg (kurt.grigg@virgin.net) -->
<!-- Web Site:  http://freespace.virgin.net/kurt.grigg -->
/* Visit http://www.yaldex.com/ for full source code
and get more free JavaScript, CSS and DHTML scripts! */

<!-- Begin
var Clrs = new Array(9);
Clrs[0] = 'ff0000';
Clrs[1] = '00ff00';
Clrs[2] = '000aff';
Clrs[3] = 'ff00ff';
Clrs[4] = 'ffa500';
Clrs[5] = 'ffff00';
Clrs[6] = '00ff00';
Clrs[7] = 'ffffff';
Clrs[8] = 'fffff0';
var sClrs = new Array(5);
sClrs[0] = 'ffa500';
sClrs[1] = '55ff66';
sClrs[2] = 'AC9DFC';
sClrs[3] = 'fff000';
sClrs[4] = 'fffff0';
var yBase;
var xBase;
var step;
var currStep = 0;
var Xpos = 1;
var Ypos = 1;
var initialStarColor = 'ffa000';
var Mtop = 250;
var Mleft = 250;
function Fireworks() {
if (document.all) {
yBase = window.document.body.offsetHeight / 3;
xBase = window.document.body.offsetWidth / 8;
}
else  {
yBase = window.innerHeight / 3;
xBase = window.innerWidth / 8;
}

////////////////////
step = 5;
for ( i = 0 ; i <document.getElementById('starsDiv').childNodes.length ; i++ ) {
for (ai = 0; ai < Clrs.length; ai++) {
var c = Math.round(Math.random()*[ai]);
}
if (currStep < 90)
document.getElementById('starsDiv').children[i].style.background=initialStarColor;
if (currStep > 90)
document.getElementById('starsDiv').children[i].style.background=Clrs[c];
document.getElementById('starsDiv').children[i].style.top = Mtop + yBase*Math.sin((currStep+i*5)/3)*Math.sin(550+currStep/100)
document.getElementById('starsDiv').children[i].style.left = Mleft + yBase*Math.cos((currStep+i*5)/3)*Math.sin(550+currStep/100)
   }

///////////////////////////////////
currStep+= step;
T=setTimeout("Fireworks()",5);
if (currStep == 220) {
currStep = -10;
for (n = 0; n < sClrs.length; n++) {
var k = Math.round(Math.random()*n);
}
initialStarColor = sClrs[k];
if (document.all) {
Dtop = window.document.body.clientHeight - 250;
Dleft = xBase * 3.5;
Mtop = Math.round(Math.random()*Dtop);
Mleft = Math.round(Math.random()*Dleft);
document.all.starsDiv.style.top = Mtop+document.body.scrollTop;
document.all.starsDiv.style.left = Mleft+document.body.scrollLeft;
}
else  {
Dleft = window.innerWidth - 100;
Dtop = window.innerHeight - 100;
Mtop = Math.round(Math.random()*Dtop+window.pageYOffset);
Mleft = Math.round(Math.random()*Dleft+window.pageXOffset);
document.getElementById('starsDiv').style.top = Mtop;
document.getElementById('starsDiv').style.left = Mleft;
}
if ((Mtop < 20) || (Mleft < 20)) {
Mtop += 90;
Mleft += 90;
      }
  
}
}
Fireworks();
//  End -->
</script>
 
9
9
9
9
9
9
9
9
9
9
9
9
9
9

Get Advanced
JavaScript and Ajax Editor,
Validator and Debugger!

1st JavaScript Editor.



Code was highlighted by 1st JavaScript Editor (The Best JavaScript Editor!).

Old School New Body


©