javascript| Special Effects | Web pages | It's very old, but it's very useful for some novices.
Add the following code to the <body> area
<layer name= "A0" left=10 top=10 visibility=show bgcolor= "#ffffff" clip= "0,0,1,1" ></layer>
<layer name= "A1" left=10 top=10 visibility=show bgcolor= "#fff000" clip= "0,0,1,1" ></layer>
<layer name= "A2" left=10 top=10 visibility=show bgcolor= "#ffa000" clip= "0,0,1,1" ></layer>
<layer name= "A3" left=10 top=10 visibility=show bgcolor= "#ff00ff" clip= "0,0,1,1" ></layer>
<layer name= "A4" left=10 top=10 visibility=show bgcolor= "#00ff00" clip= "0,0,1,1" ></layer>
<layer Name= "A5" left=10 top=10 visibility=show bgcolor= "#ff00ff" clip= "0,0,1,1" ></layer>
<layer name= "A6" left=10 top=10 visibility=show bgcolor= "#ff0000" clip= "0,0,1,1" ></layer>
<layer name= "A7" left=10 top=10 visibility=show bgcolor= "#ffffff" clip= "0,0,1,1" ></layer>
<layer name= "A8" left=10 top=10 visibility=show bgcolor= "#fff000" clip= "0,0,1,1" ></layer>
<layer name= "A9" left=10 top=10 visibility=show bgcolor= "#ffa000" clip= "0,0,1,1" ></layer>
<layer name= "A10" left=10 top=10 visibility=show bgcolor= "#ff00ff" clip= "0,0,1,1" ></layer>
<layer name= "A11" left=10 top=10 visibility=show bgcolor= "#00ff00" clip= "0,0,2,2" ></layer>
<layer name= "A12" left=10 top=10 visibility=show bgcolor= "#0000ff" clip= "0,0,2,2" ></layer>
<layer name= "A13" left=10 top=10 visibility=show bgcolor= "#ff0000" clip= "0,0,2,2" ></layer>
<div id= "Starsdiv" style= "position:absolute;top:0px;left:0px" >
<div style= "Position:relative;width:2px;height:2px;background: #ffffff; font-size:2px" ></div>
<div style= "Position:relative;width:1px;height:1px;background: #fff000; font-size:1px" ></div>
<div style= "Position:relative;width:1px;height:1px;background: #ffa000; font-size:1px" ></div>
<div style= "Position:relative;width:1px;height:1px;background: #ff00ff; font-size:1px" ></div>
<div style= "Position:relative;width:1px;height:1px;background: #00ff00; font-size:1px" ></div>
<div style= "Position:relative;width:1px;height:1px;background: #0000ff; font-size:1px" ></div>
<div style= "Position:relative;width:1px;height:1px;background: #FF0000; font-size:1px" ></div>
<div style= "Position:relative;width:1px;height:1px;background: #ffffff; font-size:1px" ></div>
<div style= "Position:relative;width:1px;height:1px;background: #fff000; font-size:1px" ></div>
<div style= "Position:relative;width:1px;height:1px;background: #ffa000; font-size:1px" ></div>
<div style= "Position:relative;width:1px;height:1px;background: #ff00ff; font-size:1px" ></div>
<div style= "Position:relative;width:2px;height:2px;background: #ff00ff; font-size:2px" ></div>
<div style= "Position:relative;width:1px;height:1px;background: #0000ff; font-size:1px" ></div>
<div style= "Position:relative;width:1px;height:1px;background: #FF0000; font-size:1px" ></div>
</div>
<script language= "JavaScript" >
<!--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 if (document.layers) {
Ybase = WINDOW.INNERHEIGHT/3;
XBase = WINDOW.INNERWIDTH/8;
}
if (document.all) {
Step = 5;
for (i = 0; i < starsDiv.all.length; i++) {
for (ai = 0; ai < clrs.length; ai++) {
var c = Math.Round (Math.random () *[ai]);
}
if (Currstep < 90)
Starsdiv.all[i].style.background=initialstarcolor;
if (Currstep > 90)
STARSDIV.ALL[I].STYLE.BACKGROUND=CLRS[C];
Starsdiv.all[i].style.top = Mtop + ybase*math.sin ((currstep+i*5)/3) *math.sin (550+currstep/100)
Starsdiv.all[i].style.left = Mleft + Ybase*math.cos ((currstep+i*5)/3) *math.sin (550+currstep/100)
}
}
else if (document.layers) {
Step = 5;
for (j = 0; J < J + +) {//number of NS layers!
var templayer = "a" +J;
for (ai = 0; ai < clrs.length; ai++) {
var c = Math.Round (Math.random () *[ai]);
}
if (Currstep < 90)
Document.layers[templayer].bgcolor=initialstarcolor;
if (Currstep > 90)
DOCUMENT.LAYERS[TEMPLAYER].BGCOLOR=CLRS[C];
Document.layers[templayer].top = Mtop + ybase*math.sin ((currstep+j*5)/3) *math.sin (550+currstep/100)
Document.layers[templayer].left = Mleft + Ybase*math.cos ((currstep+j*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 if (document.layers) {
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.layers[templayer].top = Mtop;
Document.layers[templayer].left = Mleft;
}
if ((Mtop < 20) | | (Mleft < 20)) {
Mtop + 90;
Mleft + 90;
}
}
}
Fireworks ();
End-->
</script>