JavaScript Best Codes

Wave
Wavy
Text
Effect
Moving
Move
Automatic
Scrollbar
Textbox
Wind
Twinkle
Dropdown
List
Browser
Explorer
Histry
Back
Top
Title
Checkbox
Check
Uncheck
All
FireWorks 2

Written by @kerixa 21 August 2012
In this code you will see very beautiful fireworks, each of which has a different color. You can use this code when the user of your site wins an award and you want to congratulate him/her or it can be used for the background of your website in general and make your website more attractive.
Code Snippet:

                                                
                                                <!-- this script is provided by www.javascriptfreecode.com coded by: Kerixa Inc. -->
<!-- ONE STEP TO INSTALL FIREWORKS:

  1.  Copy the coding into the BODY of your HTML document  -->

<!-- STEP ONE: Paste this code into the BODY of your HTML document  -->

<base target="_blank">

<BODY bgcolor="#000000">

<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 < 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>

<p>
<p>

<!-- TWO STEPS TO INSTALL FIREWORKS 2:



  1.  Copy the coding into the HEAD of your HTML document

  2.  Add the last code into the BODY of your HTML document  -->



<!-- STEP ONE: Paste this code into the HEAD of your HTML document  -->



<HEAD>



<!-- This script and many more are available free online at -->

<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Original:  Jacco IJzerman (j.ijzerman1@chello.nl ) -->

<!-- Web Site:  http://variomatic.quickhost.nl -->



<!--[if IE ]>

<style type="text/css">

body { overflow: hidden; }

v\:* { behavior: url(#default#VML); }

</style>

<![endif]-->

</HEAD>



<!-- STEP TWO: Copy this code into the BODY of your HTML document  -->



<BODY bgcolor="#000000">



<!-- This script and many more are available free online at -->

<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Original:  Jacco IJzerman (j.ijzerman1@chello.nl ) -->

<!-- Web Site:  http://variomatic.quickhost.nl -->



<!--[if IE ]>

<script language="JavaScript">

 

colors = new Array();



// Define your own color combinations 

colors[0] = new Array('yellow', 'lime');

colors[1] = new Array('silver', 'green')

colors[2] = new Array('silver', 'blue');

colors[3] = new Array('silver', 'purple');

colors[4] = new Array('purple', 'white');

colors[5] = new Array('blue', 'silver');

colors[6] = new Array('red', 'fuchsia');

colors[7] = new Array('yellow', 'red');



// Define the maximum number of fire arrows

maximum = 1000;



vmlobj=''; 

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

 vmlobj += '<div id="ster'+i+'" style="position:absolute; left:-50px; top-50px; visibility:hidden; z-index:50;">';

 vmlobj += '<v:shape style="width:15px; height:15px;" fillcolor="yellow" coordorigin="0,0" coordsize="200 200">';

 vmlobj += '<v:path v="m 8,65 l 72,65, 92,11, 112,65, 174,65, 122,100, 142,155,92,121, 42,155, 60,100 x e"/>';

 vmlobj += '<v:stroke on="false" /></v:shape></div>';

 }

document.write(vmlobj); vmlobj = null;



aantal = 0;



function begin()

{

try {

 if(aantal == maximum){ return;}

 kleurschema = Math.floor(Math.random() * colors.length);

 posLinks = Math.floor(Math.random() * (document.body.clientWidth - 180));

 posLinks = (posLinks < 170)? 170: posLinks;

 posBoven = Math.floor(Math.random() * (document.body.clientHeight - 180));

 posBoven = (posBoven < 170)? 170: posBoven;

 straal = 0; uiteen = true; teller = 1; flikkereffect = false;

 for(var i = 0; i < 12; i++){

 document.getElementsByTagName('shape')[i].setAttribute('fillcolor', colors[kleurschema][0]);

 document.getElementById('ster'+i).style.visibility = 'hidden'; // 5.0 fix

 document.getElementById('ster'+i).style.left = posLinks;

 document.getElementById('ster'+i).style.top = posBoven;

 }

 document.getElementById('ster0').style.top = (document.body.clientHeight - 20); 

 document.getElementById('ster0').style.visibility = 'visible';

 omhoog();

} catch(e){}

}



function omhoog()

{

try {

  positie = parseInt(document.getElementById('ster0').style.top);

  if(positie > posBoven){

  document.getElementById('ster0').style.top = (positie - 25); 

  setTimeout('omhoog()', 50);

  } else {

   for(i = 1; i < 12; i++){

   document.getElementById('ster'+i).style.top = positie;

   document.getElementById('ster'+i).style.visibility = 'visible';

   }  

  uiteenspatten();

  }

} catch(e){}

}



function uiteenspatten()

{

try {

 if(straal > 120 && straal % 10 == 0){ 

 flikkereffect = true;

 teller = (teller == colors[kleurschema].length)? 0: (teller+1);

 }

 for(var i = 0; i < 12; i++){

 var hoek = i * 30; 

 var piHoek = Math.PI - Math.PI / 180 * hoek;

 var links = posLinks + Math.round(straal * Math.sin(piHoek)); 

 var boven = positie + Math.round(straal * Math.cos(piHoek));

 document.getElementById('ster'+i).style.left = links;

 document.getElementById('ster'+i).style.top = boven;

  if(flikkereffect){

  document.getElementsByTagName('shape')[i].setAttribute('fillcolor', colors[kleurschema][teller]);

  }

 }

 if(straal < 160 && uiteen){

 straal += (straal < 120)? 10: 5;

 setTimeout('uiteenspatten()', 50);

 }

 else if(straal > 120){

 uiteen = false; straal -= 5;

 setTimeout('uiteenspatten()', 50);

 }

 else if(straal <= 120){

  for(var i = 0; i < 12; i++){

  document.getElementById('ster'+i).style.visibility = 'hidden';

  }

 aantal++;

 setTimeout('begin()', 500);

 }

} catch(e) {}

}



window.onload=begin;



</script>

<![endif]--><a target='_blank' href='www.javascriptfreecode.com' style='font-size: 8pt; text-decoration: none'>JavaScript Best Codes</a>
Example:

About @kerixa

I am Krishna Eydat. I studied Software Engineering at University of Waterloo in Canada. I lead a few tech companies. I am passionate about the way we are connected. I would like to be part of something big or be the big deal!
Tags:

effect browser explorer back
Comments

Here you can leave us commments. Let us know what you think about this code tutorial!
0 / 300
FireWorks 2

Code Snippet:

Example:

About @kerixa

Tags:

Comments

TRENDING POST

VISITORS

Create an Account

Login

Recover Account

Message Received!

Edit Code

FireWorks 2

Code Snippet:

Example:

About @kerixa

Tags:

Comments

Let's stay in touch

TRENDING POST

VISITORS
