Full version: jsB@nk » Multimedia » Events » Document Firework with Layers
URL: https://www.javascriptbank.com/document-firework-with-layers.html
Sprinkle your webpage with colorful fireworks, with this decorative DHTML script! This version differs from the original in the way the fireworks is rendered. Whichever one you choose to adopt, the end effect is simply dynamite!
Full version: jsB@nk » Multimedia » Events » Document Firework with Layers
URL: https://www.javascriptbank.com/document-firework-with-layers.html
<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">// Kurt Grigg (kurt.grigg@virgin.net)<!-- Beginvar 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 < 14 ; 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><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->