Fuegos Artificiales en el blog

Sabemos que las fiestas de fìn de año vienen acompañadas de un enorme despliegue de fuegos artificiales. Es la manera de festejar la partida de un año mas y la bienvenida, al que esperamos sea mejor. Vamos entonces, con nuestro blog, a hacer una demostraciòn de que tambien estamos festejando, pero para ello necesitaremos el siguiente script el cual debemos colocar sobre </body> y el ejemplo del efecto en este blog.

<script type="text/javascript">

// <![CDATA[

var bits=100; // how many bits

var intensity=7; // how 'powerful' is the explosion (from 3 to 10 is best)

var speed=20; // how fast - smaller is faster

var colours=new Array("#03f", "#f03", "#0e0", "#93f", "#0cc", "#f93"); 

//                     blue    red     green   purple  cyan    orange

/****************************

*      Fireworks Effect     *

*(c) 2004-6 mf2fm web-design*

*  http://www.mf2fm.com/rv  *

* DON'T EDIT BELOW THIS BOX *

****************************/

var dx, xpos, ypos, bangheight;

var Xpos=new Array();

var Ypos=new Array();

var dX=new Array();

var dY=new Array();

var decay=new Array();

var colour=0;

var swide=800;

var shigh=600;

function write_fire() {

  var b, s;

  b=document.createElement("div");

  s=b.style;

  s.position="absolute";

  b.setAttribute("id", "bod");

  document.body.appendChild(b);

  set_scroll();

  set_width();

  b.appendChild(div("lg", 3, 4));

  b.appendChild(div("tg", 2, 3));

  for (var i=0; i<bits; i++) b.appendChild(div("bg"+i, 1, 1));

}

function div(id, w, h) {

  var d=document.createElement("div");

  d.style.position="absolute";

  d.style.overflow="hidden";

  d.style.width=w+"px";

  d.style.height=h+"px";

  d.setAttribute("id", id);

  return (d);

}

function bang() {

  var i, X, Y, Z, A=0;

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

    X=Math.round(Xpos[i]); 

    Y=Math.round(Ypos[i]);

    Z=document.getElementById("bg"+i).style;

    if((X>=0)&&(X<swide)&&(Y>=0)&&(Y<shigh)) {

      Z.left=X+"px";

      Z.top=Y+"px";

 }

    if ((decay[i]-=1)>14) { 

   Z.width="3px";

   Z.height="3px";

    }

    else if (decay[i]>7) { 

   Z.width="2px";

   Z.height="2px";

    }

    else if (decay[i]>3) { 

   Z.width="1px";

   Z.height="1px";

    } 

    else if (++A) Z.visibility="hidden";

    Xpos[i]+=dX[i];

    Ypos[i]+=(dY[i]+=1.25/intensity);

  }

  if (A!=bits) setTimeout("bang()", speed);

}

 

function stepthrough() { 

  var i, Z;

  var oldx=xpos;

  var oldy=ypos;

  xpos+=dx;

  ypos-=4;

  if (ypos<bangheight||xpos<0||xpos>=swide||ypos>=shigh) {

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

      Xpos[i]=xpos;

      Ypos[i]=ypos;

      dY[i]=(Math.random()-0.5)*intensity;

      dX[i]=(Math.random()-0.5)*(intensity-Math.abs(dY[i]))*1.25;

      decay[i]=Math.floor((Math.random()*16)+16);

      Z=document.getElementById("bg"+i).style;

      Z.backgroundColor=colours[colour];

   Z.visibility="visible";

    }

    bang();

    launch();

  }

  document.getElementById("lg").style.left=xpos+"px";

  document.getElementById("lg").style.top=ypos+"px";

  document.getElementById("tg").style.left=oldx+"px";

  document.getElementById("tg").style.top=oldy+"px";

} 

function launch() {

  colour=Math.floor(Math.random()*colours.length);

  xpos=Math.round((0.5+Math.random())*swide*0.5);

  ypos=shigh-5;

  dx=(Math.random()-0.5)*4;

  bangheight=Math.round((0.5+Math.random())*shigh*0.4);

  document.getElementById("lg").style.backgroundColor=colours[colour];

  document.getElementById("tg").style.backgroundColor=colours[colour];

}

window.onscroll=set_scroll;

function set_scroll() {

  var sleft, sdown;

  if (typeof(self.pageYOffset)=="number") {

    sdown=self.pageYOffset;

    sleft=self.pageXOffset;

  }

  else if (document.body.scrollTop || document.body.scrollLeft) {

    sdown=document.body.scrollTop;

    sleft=document.body.scrollLeft;

  }

  else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {

    sleft=document.documentElement.scrollLeft;

 sdown=document.documentElement.scrollTop;

  }

  else {

    sdown=0;

    sleft=0;

  }

  var s=document.getElementById("bod").style;

  s.top=sdown+"px";

  s.left=sleft+"px";

}

window.onresize=set_width;

function set_width() {

  if (typeof(self.innerWidth)=="number") {

    swide=self.innerWidth;

    shigh=self.innerHeight;

  }

  else if (document.documentElement && document.documentElement.clientWidth) {

    swide=document.documentElement.clientWidth;

    shigh=document.documentElement.clientHeight;

  }

  else if (document.body.clientWidth) {

    swide=document.body.clientWidth;

    shigh=document.body.clientHeight;

  }

}

window.onload=function() { if (document.getElementById) {

  set_width();

  write_fire();

  launch();

  setInterval('stepthrough()', speed);

}}

// ]]>

</script>

Espero lo disfruten.