Fuegos pirotécnicos en el blog

29 de diciembre de 2010 50 comentarios ,
Pues ya que está cerca la celebración del año nuevo veamos cómo poner un script que me compartió xulinho que hará que se muestren fuegos artificiales en el blog.

Es un efecto sencillo pero que puede hacer amenas estas fechas de celebración o cualquier otra. Puedes ver el ejemplo en este blog de pruebas.

Colocarlo es muy sencillo, sólo entra en Diseño | Edición de HTML y antes de </head> agrega lo siguiente:
<script type='text/javascript'>
//<![CDATA[
// Fuegos artificiales
var bits=200; // Número de puntos
var intensity=10; // Intensidad de la explosión (recomendado entre 3 y 10)
var speed=30; // Velocidad (a menor numero, mas rapido)
var colours=new Array("#03f", "#f03", "#0e0", "#93f", "#0cc", "#f93");
// Colores de los fuegos

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>
En color verde he puesto las indicaciones de la configuración del script.
Al igual que muchos de estos scripts las luces no llegan hasta abajo del blog; para modificar qué tanto abarcarán las luces se puede modificar donde está en negrita
var swide=800;
var shigh=600;
El primer valor es el ancho y el segundo es el alto.
¿Otra opción? Qué tal esta explosión de estrellas.


50 comentarios en:

" Fuegos pirotécnicos en el blog "

  1. En Google Chrome, si se ve, abrí el blog de pruebas en el explorador y se visualiza de maravilla, muy buen truco.

    ResponderEliminar
  2. Entonces yo soy el "salado" porque no puedo verlos :(

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

    ResponderEliminar
  4. ajaja tas loco, gracias de todas maneras D:

    saludos potro que pases un buen año nuevo

    ResponderEliminar
  5. Yo estoy loco y tú estás "fashion" jajaja
    Feliz año nuevo weón :D

    ResponderEliminar
  6. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  7. que chulo!!! me ha quedado muy bien.
    y que facil...
    gracias

    ResponderEliminar
  8. ¡Ah,Potro! ¿Por qué será que siempre tienes lo ideal?
    PD:Si,si se ve en Google Chrome,tal vez es lento tu PC u.u

    ResponderEliminar
  9. Me gustaron mucho, pero no aparecen en mi página: http://fananimalcrossing.blogspot.com
    Un saludo y feliz año!

    ResponderEliminar
  10. Pero Potro no pongas más cosas que me las llevo todas jajajajajaja contigo soy comprador compulsivo jajajajaja, está genial Potro pero me temo que si pongo algo más, muchos no podrán ni entrar al blog jajajajajajajaja, ayyyyy!!! gracias Potro ;-)))

    ResponderEliminar
  11. Idennis12, podría ser por algún otro script que tienes en el blog :\

    miss-perea's, qué bueno que te ha gustado!

    Clem23256, siendo así quitaré la nota sobre Google Chrome :)

    Toptrucos/Emilio, al igual que Idennis12 puede ser debido por otro script que tienes en el blog.

    MaG@S RaDioMuSiC, jaja, a ese paso tendrás que tomar terapia para controlar esos impulsos bloggeriles :P

    ResponderEliminar
  12. jaajhajaja que andai viendo los comentarios de mi foto de perfil wn jajahaj

    Chau weon Fashion D:

    ResponderEliminar
  13. Bien, para probar que esta web es la mejor de todas!, les dejo este links: http://www.recodescargas.com.ar/ es una web que la hice gracias a Ciudad Blogger. es impresionante lo rapido que carga y aun puedo optimizarla mas... solo es cuestion de tiempo... es que soy novato, sii, tengo tan solo 5 meses en esto de blogger y realmente gracias a Ciudad Blogger logre supera las 2 mil visitas diarias y a veces supero las 6 mil!!, sin SPAM!, es mas, algunos archivos tienen spam a los uploades originales. GRACIAS!!! es lo unico que puedo decir y siento que no alanza. Un abrazo!

    ResponderEliminar
  14. Gracias otro truquito más, uno mas lindo que el otro.

    ResponderEliminar
  15. MCarlitooH2, jaja, pues eres famoso en Facebook, es imposible no ver los comentarios de las fotos :)


    Jose, vaya pues has hecho un excelente trabajo, difícilmente se consiguen tantas visitas en tan poco tiempo y estoy seguro que todo el mérito es tuyo. ¡Muchas gracias por el enlace!


    Bernice, gracias a ti por tu visita :)

    ResponderEliminar
  16. Muy buen blog!
    Te invito a visitar el mío!
    http://www.legosargentina.blogspot.com
    o si queres comprar juguetes LEGO te esperamos en
    http://www.legoshop.com.ar
    Avisame si te interesa intercambiar links! mi blog es pagerank 3!
    Muchas gracias!

    ResponderEliminar
  17. Esta bueno pero no lo entiendo, osea:
    var bits=200; // Número de puntos
    var intensity=10; // Intensidad de la explosión (recomendado entre 3 y 10)
    var speed=30; // Velocidad (a menor numero, mas rapido)
    var colours=new Array("#03f", "#f03", "#0e0", "#93f", "#0cc", "#f93");
    // Colores de los fuegos
    lo que esta despues del // tengo que borrar o colocar el numero? el numero es el 200? por ej en el numero de puntos...?!

    ResponderEliminar
  18. mi potro hemoso... está hermoso el ejemplo asi que lo haré en mi blog... que inteligencia... gracias por pensar por nosotros... eres mi gran guia... muackiz mi potrito hermoso.

    ResponderEliminar
  19. WadiisZ, lo que está en color verde es únicamente la nota sobre lo que se puede cambiar pero lo que debes modificar es el número que hay ahí.

    tiernita, hola preciosa, qué gusto leerte de nuevo por aquí :)

    ResponderEliminar
  20. Eres genial! Gracias!!!!
    Lo instalé en todos mis blogs, jajajaj...
    Yo, tampoco me he podido resistir.
    ¡¡ Feliz año nuevo !!

    ResponderEliminar
  21. !Qué bonitooooo! Feliz 2011!!
    Saludos desde Bilbao
    Patricia

    ResponderEliminar
  22. Hola de nuevo Potro:
    Me gustaría ampliar el radio de la explosión dime como hacerlo.

    Y FELIZ 2011

    ResponderEliminar
  23. Saludos Potro!

    Esta nítido esto, ojala lo hubieras publicado antes, para aplicarlo a los blogs que administro.

    Siempre estas innovando, por eso tratándose de blogs, eres mi fuente de información predilecta.

    Feliz 2011.
    Viva Mexico!

    ResponderEliminar
  24. Mi nombre es Cristina Velázquez y quiero invitarte a participar de una de mis iniciativas denominada "Tu Blog en mi Blog"
    http://www.tublogenmiblog.blogspot.com/

    Un espacio en donde cada uno de los “creativos” que en algún momento decidieron compartir, a través de un blog, sus ideas, reflexiones, conocimientos, y los de otras personas, puedan contar el por qué de esta iniciativa, qué los motivó a hacerlo, la experiencia, anécdotas y vivencias.

    A la fecha, hay más de 390 publicaciones, con contenido educativo, presentados por sus autores.

    Espero que te interese la propuesta de contarnos, a través de una entrada, acerca de tu publicación.
    Cordialmente
    Prof. Cristina Velázquez
    http://www.cristinavelazquez.blogspot.com

    ResponderEliminar
  25. Potro, te hago una consulta que no tiene nada que ver con este buen post...
    En mi página www.porvelez.com.ar en los post aparece el: 0 comentarios, a eso lo puedo modificar por una imagen que al hacer click te rediccione a los comentarios, la imagen dice algo de Comentar...
    Saludos!

    ResponderEliminar
  26. ESNAPRI, quizá nuestros propósitos de año nuevo sean dejar de ser Blogger-compulsivos (también me incluyo ahí) :D

    Pat.mm, saludos hasta Bilbao y feliz 2011 :)

    ResponderEliminar
  27. FRANCISCO ADAME RODRIGUEZ, busca donde dice:

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

    Ese último 16 cámbialo por un valor más alto, por ejemplo 56
    De esa forma el radio de la explosión será más grande.

    ResponderEliminar
  28. Roy, muchas gracias por tu comentario, también hubiese querido publicarlo antes pero la tos casi no me deja salir de la cama. ¡Saludos!

    Cristina Velázquez, muchas gracias por la invitación, al rato me daré una vuelta :)

    ResponderEliminar
  29. Coloush +16, lo que puedes hacer es poner un ícono junto al link de los comentarios, esto puedes hacerlo agregando antes de ]]></b:skin> lo siguiente:

    .comment-link {
    padding-left: 20px;
    padding-top: 5px;
    background: url(URL de la imagen) center left no-repeat;
    }

    ResponderEliminar
  30. hola potro DTB... te cuento que he estado colocandole cierto detalles al blog y para saber donde los coloque los estoy separando por barras o guiones (eso es en edicion de HMTL)y luego que guardo los cambios esa separacion me aparecen arriba en el blog es decir que tambien lo esta leyendo como un comando que puedo hacer para quitarlo de allli o como lo coloco para que no lo lea... gracias espero tu pronta respuesta jaac_michael_2010@hotmail.com

    ResponderEliminar
  31. Si el código que quieres ponerle la etiqueta para diferenciarlo está antes de </head> entonces se usa así:
    <!-- Comentario -->

    Y si el código está antes de ]]></b:skin> entonces la etiqueta de comentario se pone así:
    /* Comentario */

    ResponderEliminar
  32. Hola Potro, a horas de la desmadrugada en domingo,vengo a ver si me ayudas (otra vez jejeje)
    Yo puse estos fuegos artificiales y ahora como los quito?????????????? como que ya paso la euforia de el año nuevo y quiero estar lista para otro truco que nos vengas a regalar, mil gracias por tu ayuda.

    ResponderEliminar
  33. ejem ejem creo que ya lo solucione, hice un backup de el blog antes de ponerle el truco de los fuegos artificiales para así ponerlo de nuevo cuando ya no los necesitara, y ya lo encontre jijiji, gracias de igual forma al sólo venir a pedirte ayuda se me ilumino el foco jajajaja.

    ResponderEliminar
  34. Buen tutorial quiero que hagas uno de como poner tv o como poner tv a la red ok
    y gracias desde Perú!!!!

    ResponderEliminar
  35. Bernice, por eso siempre es bueno tener un respaldo :)
    Pero igual si un día te sucede lo mismo sólo busca en la entrada el código que pusiste para saber qué código buscar en tu plantilla y eliminar.


    ronald, hay uno para transmitir TV, usa el buscador y busca Transmitir video en vivo con Justin.tv

    ResponderEliminar
  36. estan espectaculares esos juegos artifuciales..... gracias por publicarlos

    ResponderEliminar
  37. Gracias a ti por tu visita, qué bueno que te han gustado!

    ResponderEliminar
  38. Potro buenas tardes, encuentro un problemita al colocar estos fuegos pirotecnicos en mi blog, ya que en los gadgets flash los fuegos se van por bajo, habrá alguna solución? desde ya muchas gracias, tus consejos y aportaciones sirven de muuuucho.

    ResponderEliminar
  39. Buenas noches Ke buena Jutiapa. ¿En cuál blog lo has puesto?
    Necesitaría verlo puesto en tu blog para ver qué puede estar pasando y así entender el problema.
    Saludos.

    ResponderEliminar
  40. Ups perdón jejeje, lo he colocado en www.kebuenajutiapa.blogspot.com Saludos!!!

    ResponderEliminar
  41. Pues acabo de probarlos en esa plantilla y funcionan bien, así que debe ser por algún otro script que usas.
    Prueba con los que son en flash, pero en lugar de ponerlos antes de </body> ponlos después de <body>

    ResponderEliminar
  42. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  43. no funcionan los enlaces a los artículos :(

    ResponderEliminar
  44. Hola Potro como estas?

    Puse este efecto en mi blog porque el blog cumplía años
    Al día siguiente cuando fui a buscar el script para borrarlo NO ESTABA

    PORFA AYUDAMEE

    Nombre del blog: Club Penguin Plisis

    Montemar

    ResponderEliminar
    Respuestas
    1. Hola Montemar, entré a tu blog pero no los veo, supongo que ya los has podido eliminar.
      Saludos.

      Eliminar
    2. Amigo intente otra forma de eliminarlos por eso no los encontrabas

      estaban en otra parte del html :(

      Saludos

      Eliminar
  45. lo ise y no salio en mi blog pero bueno gracias :*

    ResponderEliminar
  46. lo ise y no salio en mi blog pero bueno gracias :*

    ResponderEliminar

Si tu blog contiene material protegido por derechos de autor habilita tu perfil y deja únicamente el nombre de tu blog, no dejes la dirección del mismo, de lo contrario el comentario será eliminado.

 
Ir Arriba Ir Abajo
I Ciudad Blogger