Fantasmas en el blog

20 de octubre de 2010 91 comentarios ,

Para quienes les gusta disfrazar su blog en Halloween, o para quienes les gusta tener adornos macabros en el blog, este script les ayudará a darle ese aspecto de terror con unos fantasmas volando por todo el blog.
Puedes ver el ejemplo en este blog poseído de pruebas.

Ponerlo en el blog es sumamente sencillo, sólo basta entrar en Diseño | Elementos de la página | Añadir gadget | HTML/Javascript y ahí pegar este código:
<script language="JavaScript">
if ((document.getElementById) &&
window.addEventListener || window.attachEvent){
(function(){

//Configuracion

var numberOfGhosts = 10; /* Numero de fantasmas */
var ghostSpeed = 0.9; /* Velocidad */
var inTheFace = 5;
var setTimeOutSpeed = 50; /* Velocidad a la que desaparecen */

//Fin de la configuracion

var h,y,cy,cx,sy,sx,ref,field,oy1,oy2,ox1,ox2,iy1,iy2,ix1,ix2;
var d = document;
var domWw = (typeof window.innerWidth == "number");
var domSy = (typeof window.pageYOffset == "number");
var pi1 = 180/3.14;
var pi2 = 3.14/180;
var y = [];
var x = [];
var strs = [];
var gro = [];
var dim = [];
var dfc = [];
var vel = [];
var dir = [];
var acc = [];
var dtor = [];
var xy2 = [];
var idx = document.getElementsByTagName('div').length;
var zip = [];
var pix = "px";

for (i = 0; i < numberOfGhosts; i++){
document.write('<div id="ghosts'+(idx+i)+'"'
+' style="position:absolute;top:0px;left:0px;'
+'width:40px;height:40px;background-color:transparent;'
+'font-size:0px;"><img src="http://1.bp.blogspot.com/_dsEG33PDaHw/TLUwy8cYCsI/AAAAAAAAAZ0/kWv1B3tlak4/s1600/ghost.gif" class="ghost" width="70"/></div>');
}

if (domWw) ref = window;
else{
if (d.documentElement &&
typeof d.documentElement.clientWidth == "number" &&
d.documentElement.clientWidth != 0)
ref = d.documentElement;
else{
if (d.body &&
typeof d.body.clientWidth == "number")
ref = d.body;
}
}

function win(){
var mozBar = ((domWw) &&
ref.innerWidth != d.documentElement.offsetWidth)?20:0;
h = (domWw)?ref.innerHeight:ref.clientHeight;
w = (domWw)?ref.innerWidth - mozBar:ref.clientWidth;
cy = Math.floor(h/2);
cx = Math.floor(w/2);

oy1 = (75 * h / 100);
oy2 = (oy1 / 2);
ox1 = (75 * w / 100);
ox2 = (ox1 / 2);

iy1 = (18 * h / 100);
iy2 = (iy1 / 2);
ix1 = (18 * w / 100);
ix2 = (ix1 / 2);

field = (h > w)?h:w;
}

function rst(s){
var cyx;
sy = (domSy)?ref.pageYOffset:ref.scrollTop;
sx = (domSy)?ref.pageXOffset:ref.scrollLeft;
acc[s] = 0;
dim[s] = 1;
xy2[s] = 0;
cyx = Math.round(Math.random() * 2);
if (cyx == 0){
y[s] = (cy - iy2) + Math.floor(Math.random() * iy1);
x[s] = (cx - ix2) + Math.floor(Math.random() * ix1);
}
else{
y[s] = (cy - oy2) + Math.floor(Math.random() * oy1);
x[s] = (cx - ox2) + Math.floor(Math.random() * ox1);
}
dy = y[s] - cy;
dx = x[s] - cx;
dir[s] = Math.atan2(dy,dx) * pi1;
dfc[s] = Math.sqrt(dy*dy + dx*dx) ;
zip[s] = 10 * (dfc[s] + inTheFace) / 100;
vel[s] = ghostSpeed * dfc[s] / 100;
dtor[s] = (field - dfc[s]);
if (dtor[s] < 1) dtor[s] = 1;
gro[s] = 0.003 * dtor[s] / 100;
}

function animate(){
for (i = 0; i < numberOfGhosts; i++){
y[i] += vel[i] * Math.sin(dir[i] * pi2);
x[i] += vel[i] * Math.cos(dir[i] * pi2);
acc[i] = (vel[i] / (dfc[i] + (vel[i] * zip[i])) * vel[i]);
vel[i] += (acc[i]);
dim[i] += gro[i] + acc[i] / zip[i];
xy2[i] = dim[i] / 2;
if (y[i] < 0 + xy2[i] ||
x[i] < 0 + xy2[i] ||
y[i] > h - xy2[i] ||
x[i] > w - xy2[i]){
rst(i);
}
strs[i].top = (y[i] - xy2[i]) + sy + pix;
strs[i].left = (x[i] - xy2[i]) + sx + pix;
strs[i].width = (strs[i].height = (Math.round(dim[i])) + pix);
}
setTimeout(animate,setTimeOutSpeed);
}

function init(){
win();
for (i = 0; i < numberOfGhosts; i++){
strs[i] = document.getElementById("ghosts"+(idx+i)).style;
rst(i);
}
animate();
}

if (window.addEventListener){
window.addEventListener("resize",win,false);
window.addEventListener("load",init,false);
}
else if (window.attachEvent){
window.attachEvent("onresize",win);
window.attachEvent("onload",init);
}
})();
}//End.

</script>

<style>
.ghost {
filter:alpha(opacity=30);
-moz-opacity: 0.3;
opacity: 0.3;
-khtml-opacity: 0.3;
}
html {
overflow-x:hidden;
}
</style>

Con eso ya tendrán los fantasmas merodeando el blog. Se pueden modificar algunos valores de velocidad al gusto, esos se modifican en las anotaciones que he puesto en color verde.

NOTA: En las plantillas del diseñador de Blogger no funciona muy bien. Raro ¿no?


91 comentarios en:

" Fantasmas en el blog "

  1. buenísimo, lo pondré el mero día, gracias

    ResponderEliminar
  2. wau esto si que esta muy bueno, siempre sacas nuevas cosas para el halloween....
    saludos

    ResponderEliminar
  3. fabuloso potro eres un genio, directamente a mi blog, que seguramente se vera increible,

    ResponderEliminar
  4. tienes razon en las plantillas del diseñador no se ven bien, bueno ni modo, pero eres un genio, gracias

    ResponderEliminar
  5. SDK, ojalá te quede bien :)

    Carlos Javier, qué bueno que te han gustado :)

    lerh, benditas plantillas del diseñador :\

    ResponderEliminar
  6. hola potro tengo una plantilla diseñada con artister puse el script y los fantasmas aparecen pero debajo de la plantilla y no se ven xk?

    ResponderEliminar
  7. haaaaaaaaaay padrisimos, mil, mil gracias, me encantaron

    asi quedaron

    http://lo-que-el-agua-se-llevo.blogspot.com

    ResponderEliminar
  8. hajahaja excelente, muchas gracias wm ;)

    saludos

    ResponderEliminar
  9. Ash! lástima que los que tengamos plantilla blogger no funcione! :(

    Está muy bueno.

    Saludos!

    ResponderEliminar
  10. INCREHIBLEE QUEDO MIREN http://www.lockerzlatinos.com/

    ResponderEliminar
  11. Hola Potro, Genial tu trucoo, yo he adornado mi blog, pues la cabecera he colocado una imagen de halloween... Y la fecha estaba arriba al cambiar la imagen la fecha se ha borrado... :(, Ayudame...

    ResponderEliminar
  12. Qué bueno, lo he puesto pero solo un fantasmita para que no moleste mucho

    Gracias Potro

    ResponderEliminar
  13. ricardo osorio (administrador), no conozco las plantillas diseñadas con ese programa pero supongo que tienen el mismo problema que las del diseñador de Blogger.

    Admin, ¿verdad que sí? :)

    Leticia Mtz, sólo los veo en la sidebar pero curiosamente me gusta mucho de ese modo :P

    MCarlitooH2, ¿ya estudiaste wn? jajaja

    ResponderEliminar
  14. Luis Kasanova, lo sé, pero poco sé sobre esas plantillas, sino seguro que vería el modo de hacerlos funcionar también ahí.

    Lockerz Latinos, no los vi :(

    Microboy90, gracias a ti por tu visita :)

    KatoGd, ¿en cuál blog?

    Meri, creo que yo hubiera hecho lo mismo, dejando sólo dos o tres :)

    ResponderEliminar
  15. muy bueno tu blog, me ago seguidor. gracias tambien por estos elementos para halloween ya que me han servido para adornar un poco mi blog. yo tambien los he compartido con mis seguidores, espero que no te importe :)
    pasate por mi blog si quieres, saludos;)

    http://zonaboom.blogspot.com/

    ResponderEliminar
  16. muy muy bueno!! muchas gracias
    lo usare para halloween :D

    ResponderEliminar
  17. Potro en zona 4 fire: http://tudiscolive.blogspot.com/
    Pues la fecha estaba alli arriba de la cabecera pero ya no aparece, y pues era que yo no tenia imagen sino lo tenia sencillo solo letras y la fecha si aparecia pero ahora se suprimio, al colocar la imagen!! :o

    ResponderEliminar
  18. Muy bueno Potro, pero es verdad en las nuevas plantillas no funciona, tomè "prestada" tu imagen del fantasmita porque me encantò, espero no te moleste y si es asì, me avisas la saco ¿si?
    Saludos!

    ResponderEliminar
  19. Te luces como siempre Potro, excelente gadget. Saludos.

    ResponderEliminar
  20. KatoGd, ¿aun tienes el código dentro del blog? porque ya no lo veo. Si lo has quitado ponlo de nuevo y dime cuál código usas, es decir, de dónde lo has sacado, de este modo podré ver dónde se puede reubicar.

    Mariangeles, ninguna molestia, es toda tuya ;)

    LMGuillermo, te agradezco tu comentario, qué gusto que haya sido de tu satisfacción :)

    ResponderEliminar
  21. Eres un genio tío, gracias a tu ayuda funcionamos.
    Saludos.

    ResponderEliminar
  22. muy muy muy bueno me encanto!!!!! solo aqi encuentro cosas como esas lo pondre el merito dia gracias!!!

    ResponderEliminar
  23. Hola Potro! Muy curioso este truco. Ya lo puse en mi blog de pruebas y me funcionó perfectamente. Ahora voy a instalarlo en otro de mis blogs. Como, en lo personal, no soy partidaria del Halloween, solo le cambié la imagen por otra a mi gusto y me quedó justo como quería. Tal como Meri (coment. 14), yo también le dejé solo una imagen.
    Quería saber si hay alguna manera de ajustarle el grado de transparencia de la imagen, si fuera posible.
    Muchas gracias por todo, Potro, y saludos a todos!

    ResponderEliminar
  24. guillemaro, sólo colaboro un poco, ustedes son los que realmente le dan vida a sus blogs :)

    Lucía Mon Amour, mucho muy chulo, me alegra que te hayan gustado.

    Michelle Jacqueline, qué bueno que te ha gustado tanto como a mí.

    ResponderEliminar
  25. Hola Vicky,

    Claro, puedes modificar la transparencia a tu gusto. Eso se controla en esta parte que se encuentra al final del código:

    filter:alpha(opacity=30);
    -moz-opacity: 0.3;
    opacity: 0.3;
    -khtml-opacity: 0.3;

    Si deseas que sea menos transparente entonces pon valores más altos, por ejemplo, para que esté justo a la mitad de la transparencia los valores quedarían así:

    filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
    -khtml-opacity: 0.5;

    Entre más altos sean los valores (no mayores a 9) menos opacidad tendrá.

    Saludos.

    ResponderEliminar
  26. Hola! Ahora sí me quedó tan clarita como el agua (no la imagen, sino tu explicación - ja,ja).
    Muchas gracias por todo y muchos saludos a ti, Potro!

    ResponderEliminar
  27. Buenisima aportacion potro, sin duda este blog es el mejor de todos, si algun dia te presentas a unos de esos concursos de blogger no dudare en votarte, ¡sigue asi!

    ResponderEliminar
  28. Pues si, los que visitan mi blog, deben ser fantasmas, porque ninguno comenta nada.
    Un saludo

    ResponderEliminar
  29. Toptrucos, entonces contaré con tu voto si un día lo necesito :D

    Gildo Kaldorana, habrá que contratar a una médium para que los haga hablar.

    CHiCken, mucho :)

    ResponderEliminar
  30. Potro a mi me funciono en mi blog pero el rproblema es que aparecen muy pequeños ¬¬'

    pff

    que mal u.u

    ResponderEliminar
  31. Probablemente es porque cambiaste el width="70" por width="180"

    ResponderEliminar
  32. De hecho Potro, ese truco de la fecha es el mismo que tienes en el top... Osea es de tu autoria, y estaba super bien pero de un momento a otro cuando cargue la imagen se suprimio... Y el codigo sigue estando en la plantilla...

    ResponderEliminar
  33. Pues el script de la fecha no lo veo en tu blog, quizá lo eliminaste sin darte cuenta. Y en el caso de los estilos de la fecha también veo un error. Tienes esto en los estilos:

    body#layout #footer-wrapper .links,body#layout #search {
    display:none;
    fechadeldiapmargin:0;
    color:#FFF;
    padding:1px 0 3px 10px;
    }

    Si te fijas eso que está en negrita está mal y puede estar interfiriendo en alguna otra área sin darte cuenta.

    ResponderEliminar
  34. YA ME DIO MELLO!!!! esta poseido !!!!!

    ResponderEliminar
  35. A ver si no te jalan las patas cuando te descuides :D

    ResponderEliminar
  36. potro una pregunta! te hice el comentario en otro space y se me perdio! disculpa eso; esta la recordare! mi pregunta es: cuando tu dices colocar antes de "heart" y despues de: "cierta palabra q no recuerdo" no encuentro donde colocar eso! :( se q es edicion d html pero psz alli me pierdo.. hay muchos codigos, como encuentro esas palabritas.. :( espero tu respuestas hermano!! gracias (Y)

    ResponderEliminar
  37. No tengo idea de a cuál entrada te refieras :\
    Pero busca los códigos usando las teclas CTRL + F e igual prueba expandiendo los artilugios.
    Lamentablemente no sé cuál entrada sea así que tampoco sé si es algún código que puede no estar en todo tipo de plantillas.

    ResponderEliminar
  38. WOW!! Eres la neta, jejeje, esto es simplemente genial, mil gracias por hacer este súper post halloweenesco =P

    ResponderEliminar
  39. Gracias Merlina, qué buen que te gustó tanto como a mí :)

    ResponderEliminar
  40. Muy bueno potro ..me gustaria saber como se ponen esas flechitas que estan a la derecha que indica arriba y abajo

    ResponderEliminar
  41. hola Potro me preguntaba si habia alguna forma de cambiar el color del texto de todas mis entradas sin necesidad de editar cada una por separado, sino en una opcion o en la edicon html...gracias de antemano pronto

    ResponderEliminar
  42. Hola Ricardo Daniel,

    En esta área:

    body {
    background:#000000;
    margin:0;
    color:$textcolor;

    Cambia ese $textcolor; o el código que tengas por el código del color que deseas, sin embargo, si a las entradas les has dado un color al momento de crearlas entonces esas entradas conservarán el color que les pusiste.
    Sin embargo, si quieres que TODAS las entradas tengan el mismo color siempre y no cambien de color aun cuando edites las entradas entonces cambia esa parte:
    color:$textcolor;

    Por esta:
    color:#FFFF00 !important;

    De igual modo sólo modifica el color que deseas.

    ResponderEliminar
  43. Hola otra vez Potro, tengo otra duda; por que el contador de mi feed varia de numero, algunas veces esta en 30 otras en 9, ese contador solo toma en cuenta los usuarios conectado o los suscritos en mi blog?

    PD: el contador que tengo es el que ofrece Ferrburn el cuadrito azul...gracias de antemano

    ResponderEliminar
  44. El de Feedburner no es contador de visitas web, sino un contador de suscripciones al feed. Es normal que tenga variaciones, algunas veces varía un poco, pero otras es mucho.

    ResponderEliminar
  45. Si pero esas variaciones ¿que significan? porque si una persona se suscribe no deberia desaparecer del feed, osea el numero no deberia disminuir hoy y volver al mismo numero mañana

    ResponderEliminar
  46. Las personas así como los distintos servicios de feed se suscriben y se dejan de suscribir continuamente de cualquier feed, es por eso que hay esas variaciones. Pero no le hagas mucho caso, usualmente Feedburner tiene irregularidades con el número de suscriptores.

    ResponderEliminar
  47. Muy bueno esto potro pero sabes no se por que a algunos les va bien y a mi por el contrario solo me muestra la imagen en un solo lugar si puedes mirala y si hay algo que hacer me gustaria saberlo aunque no se ve mal =P..

    http://gremioaleaiactaest.blogspot.com/

    ResponderEliminar
  48. Potro todo se soluciono ahora esta marchando bien bueno gracias por el detalle y tomarte la molestia de publicar estos adornos para darle un toque especial a nuestros sitios webs por una corta temporada =D

    ResponderEliminar
  49. Vale, me alegra que ya esté todo funcionando.
    Saludos :)

    ResponderEliminar
  50. Hola potro me preguntaba si es posible hacer que estos fantasmas no tengan transparencia pero al pasar el mouse por ellos se vuelvan transparentes, sería genial si encuentras la forma. Te quedó genial el truco.

    ResponderEliminar
  51. Hola potro ya lo solucione, use la propiedad :hover, pero gracias de todos modos.

    ResponderEliminar
  52. YA LO PONGO EN MI BLOG!!!! EXCELENTE POTRO!!! COMO SIEMPRE MARAVILLOSAS IDEAS!!! GRACIAS!!!

    ResponderEliminar
  53. Bueno a un dia de Halloween hice uso de este simpatico aporte, asi quedo la cosa http://dragonballreborn.tk/

    muchas gracias como siempre :D

    ResponderEliminar
  54. Jiraiya, no se me había ocurrido esa opción, buena, buena :)

    Kary, qué bueno que te ha gustado :)

    Diragon, te ha quedado muy bien :)

    ResponderEliminar
  55. Jajajajaja...esta fantástico Bro!! me encanta! Las animaciones son muy realistas, y como todos tus trucos, es muy sencillo.

    El del fuego tb lo acabo de ver e iguál! Fantástico y sencillo. (y combinados queda de lujo!!)

    Un abrazo!!!

    ResponderEliminar
  56. Acá entre nos, es un script sin imágenes que tuve que adaptar pensando que podría tener más potencial y parece que funcionó, aunque todo el crédito se lo lleva el que haya creado la imagen del fantasma.

    Qué bueno que te ha gustado bro, un abrazo!

    ResponderEliminar
  57. o_Ó santo cielo Bro :S y después me niegas que eres un genio :S

    La verdad, me saco el sombrero Bro, felicitaciones por el trabajo... aún así no haya funcionado... y te agradecemos que pases horas frente a la PC haciendo estos trucos que nosotros aplicamos en menos de 5 min y quedan fantásticos.

    Un abrazo!!

    ResponderEliminar
  58. Potro.........como hago para q los fantasmas me salgan en el centro de la pagina....como tu blog.....xq a mi me salen a lado izquierdo

    mira mi blog

    www.moviefreelandia.blogspot.com

    ResponderEliminar
  59. Prueba poner el gadget justo arriba de las entradas.

    ResponderEliminar
  60. Gracias.....ahora si me salió.......otra pregunta Potro......como hago para q la direccion cuando pones en el navegador d ves q salga s mundo pequeño......salga una imagen q le ponga ya....xq eh visto q le ponen la imagen q quieras......y eso quisiera saber......

    ResponderEliminar
  61. gracias......ya lo agregué y si me salió.....

    ResponderEliminar
  62. Mis fantasmas salen detras de los enlaces porque?

    ResponderEliminar
  63. En esas plantillas no funciona bien Ady :/

    ResponderEliminar
  64. en la plantilla que yo tengo no se pueden ver los fantasmas verdad??? www.folkmetalmusik.blogspot.com

    ResponderEliminar
  65. hey potro se puede cambiar la imagen

    ResponderEliminar
  66. FINEM, lamentablemente en esas plantillas no funcionan bien.


    CFH, claro, en el script verás esta URL, sólo cámbiala por la que quieras:
    http://1.bp.blogspot.com/_dsEG33PDaHw/TLUwy8cYCsI/AAAAAAAAAZ0/kWv1B3tlak4/s1600/ghost.gif

    ResponderEliminar
  67. Jaja, muy original. Gracias por el código =)

    ResponderEliminar
  68. OMG! Quedan super bien. Me extraña haber sabido ponerlos sin ayuda, XD Gracias, mi blog esta muy bien de halloween :)

    ResponderEliminar
  69. A mí no me extraña, significa que cada día aprendes más y eso es super :)

    ResponderEliminar
  70. Gracias otra vez!!! Yo me decidí por dejar sólo un fantasma y queda muy bien. Creo que lo dejaré puesto todo el año...jejejeje ;-)

    ResponderEliminar
  71. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
    Respuestas
    1. En el código encontrarás una URL, esa es la imagen y que puedes cambiar por alguna otra.
      Saludos.

      Eliminar
  72. potro dejame decirte que eres un maestro de maestros te felicito amigo

    ResponderEliminar
  73. porto dejame decirte que eres un maestro de maestros te felicito amigo

    ResponderEliminar
  74. potro dejame decirte que eres un maestro de maestros te felicito amigo

    ResponderEliminar

Los comentarios están siendo moderados y serán publicados una vez que hayan sido revisados por un administrador.
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