Buscador
.

03 noviembre 2011

Fuegos Artificiales en tu página

Este es un muy interesante efecto que puedes aplicar a tu página, con solo pegar el script parecerá que en tu página estallan fuegos artificiales de todos colores 




<script type="text/javascript">
//<![CDATA[
var bits=100; // cuantos bits
var intensity=7; // que tan "poderosa" es la explosión. (recomendado entre 3 y 10)
var speed=20; // rapidez (a menor numero, mas rapido)
var colours=new Array("#03f", "#f03", "#0e0", "#93f", "#0cc", "#f93");
//azul rojo verde purpura cyan, naranjo

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>



26 comentarios:

  1. hola como hago para desactivarlo gracias....

    ResponderEliminar
  2. Tienes que recordar en donde lo pusiste y eliminarlo =)

    ResponderEliminar
  3. y esto donde se copia?

    ResponderEliminar
    Respuestas
    1. en un texto HTML

      Eliminar
    2. A qué te refieres con un texto HTML?

      Eliminar
    3. Este comentario ha sido eliminado por el autor.

      Eliminar
  4. Gracias por el code me sirvio de mucho :D esta es mi web
    http://hiramtenoriomrdx.jimdo.com/

    ResponderEliminar
  5. Hola!!! antes que nada, los felicito, es una página EXCELENTE!!! muchísimas gracias!.. y bueno mi duda es, cómo puedo poner este efecto y el de "Efecto de nieve" , que es del cursor, cuando pongo los dos códigos en mi documento HTML, en la pagina web solo me sale un efecto, no se pueden poner los dos??? De ante mano, muchísimas gracias!!!!

    ResponderEliminar
  6. Respuestas
    1. Sí, se le pueden agregar todos los colores que quieras, por ejemplo yo puse plata, oro, bronce, fucsia, etc.

      Eliminar
  7. Qué excelente contenido...

    ResponderEliminar
  8. Oye administrador de esta web; serias tan amable en enseñarme como hacer un cuadro de comentarios y publicarlos en mi web, así como este en el que acabo de comentar.
    Gracias :D

    ResponderEliminar
  9. jaja muy bueno

    http://delrecuerdo.tuars.com/

    ResponderEliminar
  10. muy bien exelente trabajo..... !!!1

    ResponderEliminar
  11. oyes puedo cambiar la explosion por otra cosa un logo o algo asi

    ResponderEliminar
  12. HOLA DISCULPEN ENTTRE QUE ETIQUETAS PEGO EL CODIGO

    ResponderEliminar
  13. miren mucha agradesco todo lo que hacen pues empiezo en html y no sabia todos estos trucos
    exitos

    att. Julio tanchez

    ResponderEliminar
  14. miren mucha agradesco todo lo que hacen pues empiezo en html y no sabia todos estos trucos
    exitos

    att. Julio tanchez

    ResponderEliminar
  15. http://radiodemadrid-es.jimdo.com/

    ResponderEliminar