Text effects fuegos artificiales | FireWorks javascript

Este codigo javascript como su nombre lo indica, simula en nuestra pantalla destellos de fuegos artificiales, vale la pena darle una mirada.

<html>
<title>text efecto fuegos artificiales - FireWorks</title>
<body bgcolor=000000>
<!-- Start of Fireworks: High-light or select all, copy and paste in Body --> 
  <LAYER name="a0" left=10 top=10 visibility=show bgcolor="#ffffff" clip="0,0,2,2"></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,1,1"></LAYER>
  <LAYER name="a13" left=10 top=10 visibility=show bgcolor="#ff0000" clip="0,0,1,1"></LAYER>
</P>
<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">
/*
Fireworks
Copyright Kurt Grigg (website.lineone.net/~kurt.grigg/javascript)
To add more shock to your site, visit www.DHTMLShock.com
*/
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]='CC77FF';
sClrs[3]='fff000';
sClrs[4]='fffffF';
var step;
var currStep = 0;
var Xpos = 1;
var Ypos = 1;
var initialStarColor='ffa000';
var Mtop=250;
var Mleft=200;
var b;
for (b=0; b < 100; b++)
var explosionSize=120;
function Fireworks() {
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 + explosionSize*Math.sin((currStep+i*5)/3)*Math.sin(550+currStep/100)
starsDiv.all[i].style.left = Mleft + explosionSize*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 + explosionSize*Math.sin((currStep+j*5)/3)*Math.sin(550+currStep/100)
document.layers[templayer].left = Mleft + explosionSize*Math.cos((currStep+j*5)/3)*Math.sin(550+currStep/100)
}
}
currStep+= step;
//window.status='Current explosion size = '+explosionSize;
T=setTimeout("Fireworks()",5);
if (currStep==220)
{
currStep=-10;
explosionSize=Math.round(Math.random()*b+100);
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-270;
Dleft=window.document.body.clientWidth/2.3;//?
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 < 50) || (Mleft < 50))
{
Mtop+=80;
Mleft+=80;
} 
}
}
Fireworks();
// -->
</SCRIPT>
<!-- End of Fireworks --> 
</body>
</html>

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>