Buscador
.

20 octubre 2011

Como poner nieve dentro de tu web

Con este maravilloso efecto podrás hacer que caiga nieve al mover el cursor, muy útil para darle color y un poco de alegría a tu web
<script type="text/javascript">
// <![CDATA[
var colour="#f0f";
var sparkles=50;

/****************************
* Tinkerbell Magic Sparkle *
* http://www.mf2fm.com/rv *
* NO EDITAR TEXTO MAS ABAJO *
****************************/
var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var tiny=new Array();
var star=new Array();
var starv=new Array();
var starx=new Array();
var stary=new Array();
var tinyx=new Array();
var tinyy=new Array();
var tinyv=new Array();

window.onload=function() { if (document.getElementById) {
var i, rats, rlef, rdow;
for (var i=0; i<sparkles; i++) {
   var rats=createDiv(3, 3);
   rats.style.visibility="hidden";
   document.body.appendChild(tiny[i]=rats);
   starv[i]=0;
   tinyv[i]=0;
   var rats=createDiv(5, 5);
   rats.style.backgroundColor="transparent";
   rats.style.visibility="hidden";
   var rlef=createDiv(1, 5);
   var rdow=createDiv(5, 1);
   rats.appendChild(rlef);
   rats.appendChild(rdow);
   rlef.style.top="2px";
   rlef.style.left="0px";
   rdow.style.top="0px";
   rdow.style.left="2px";
   document.body.appendChild(star[i]=rats);
}
set_width();
sparkle();
}}

function sparkle() {
var c;
if (x!=ox || y!=oy) {
   ox=x;
   oy=y;
   for (c=0; c<sparkles; c++) if (!starv[c]) {
     star[c].style.left=(starx[c]=x)+"px";
     star[c].style.top=(stary[c]=y)+"px";
     star[c].style.clip="rect(0px, 5px, 5px, 0px)";
     star[c].style.visibility="visible";
     starv[c]=50;
     break;
   }
}
for (c=0; c<sparkles; c++) {
   if (starv[c]) update_star(c);
   if (tinyv[c]) update_tiny(c);
}
setTimeout("sparkle()", 40);
}

function update_star(i) {
if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
if (starv[i]) {
   stary[i]+=1+Math.random()*3;
   if (stary[i]<shigh+sdown) {
     star[i].style.top=stary[i]+"px";
     starx[i]+=(i%5-2)/5;
     star[i].style.left=starx[i]+"px";
   }
   else {
     star[i].style.visibility="hidden";
     starv[i]=0;
     return;
   }
}
else {
   tinyv[i]=50;
   tiny[i].style.top=(tinyy[i]=stary[i])+"px";
   tiny[i].style.left=(tinyx[i]=starx[i])+"px";
   tiny[i].style.width="2px";
   tiny[i].style.height="2px";
   star[i].style.visibility="hidden";
   tiny[i].style.visibility="visible"
}
}

function update_tiny(i) {
if (--tinyv[i]==25) {
   tiny[i].style.width="1px";
   tiny[i].style.height="1px";
}
if (tinyv[i]) {
   tinyy[i]+=1+Math.random()*3;
   if (tinyy[i]<shigh+sdown) {
     tiny[i].style.top=tinyy[i]+"px";
     tinyx[i]+=(i%5-2)/5;
     tiny[i].style.left=tinyx[i]+"px";
   }
   else {
     tiny[i].style.visibility="hidden";
     tinyv[i]=0;
     return;
   }
}
else tiny[i].style.visibility="hidden";
}

document.onmousemove=mouse;
function mouse(e) {
set_scroll();
y=(e)?e.pageY:event.y+sdown;
x=(e)?e.pageX:event.x+sleft;
}

function set_scroll() {
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;
}
}

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;
}
}

function createDiv(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height+"px";
div.style.width=width+"px";
div.style.overflow="hidden";
div.style.backgroundColor=colour;
return (div);
}
// ]]>
</script>


96 comentarios:

  1. Hola me gusta mucho estos trucos, y tengo varios en mi web, pero este es el unico que no me funciona. Un saludo
    Anna

    ResponderEliminar
  2. Hola Anna (qe bello nombre, es mi favorito :)) como tú usas jimdo tienes que asegurarte de agregar el código así: Insertar nuevo elemento ó el signo de +, widget/html, pegar el código y hacer clic en guardar.

    Si quieres que se mire en toda la página pegalo en la barra lateral.

    Y gracias, eres la primera en comentar en la nueva página :D

    ResponderEliminar
  3. Hola Daniel gracias por tu comentario, pero creo que hago algo mal lo pego en el widget/html de mi pagina y sigue sin salirme, y eso que tus códigos siempre me funcionaron a la primera.
    Anna

    ResponderEliminar
  4. si carnal algo anda mal.....

    ResponderEliminar
  5. efectivamente no funciona

    ResponderEliminar
  6. Hola amigos, gracias por sus comentarios y pido perdon por los inconvenientes pero el codigo ya esta arreglado y lo pueden utilizar con toda facilidad :)

    ResponderEliminar
  7. Gracias, daniel, EFECTIVAMENTE EL CÓDIGO NO FUNCIONABA ANTERIORMENTE, pero con el arreglo que le hiciste QUEDO DE 10. Muchas Gracias, Oyes, no lo tendrás con otro color que no sea rosadito? xd

    ResponderEliminar
  8. ahora si, gracias.
    para cambiar el color lo puedes hacer tu mismo cambiando el codigo del color

    ResponderEliminar
  9. Rachit: perdón de nuevo, pero gracias por ayudar a arreglarlo. Si quieres cambiar el color tienes quitar
    f0f
    y poner ahí el color que quieres

    anónimo: gracias a ti por comentar y colaborar :)

    ResponderEliminar
  10. Ahora sí, gracias por todo........

    ResponderEliminar
  11. Anna: al contrario, disculpa las molestias y gracias por estar al pendiente :D

    ResponderEliminar
  12. Hola :) Me Funciona Perfecto! Pero Quería Saber Si Se Puede Cambiar El Color! Muchas Gracias, y Disculpen Las Molestias!

    ResponderEliminar
  13. MiiLú: si puedes cambiar el color, solo sustituye
    f0f (al principio del código)
    por el color que quieres

    ResponderEliminar
  14. Hola ... ami no me funciona y mi pagina es http://wwww.informaticalidelca.com.ar/ no me funciona este script y es el unico que no me funciona...... porfavor mi hosting es 000webhost.com ayudame porfavor.

    ResponderEliminar
  15. Anonymous: agradeceria que me dieras tu pagina correcta ya que la que pusiste no existe

    ResponderEliminar
  16. muchacos me yamo carlos pero definitivamente no me da

    ResponderEliminar
  17. http://roble.pntic.mec.es/apuente/colores_a.html
    De aqui puedes sakar colores, recuerda que antes de poner el codigo del color necesitas el # antes que cualquier color, ejemplo yo lo tengo hací:
    var colour="#00FF00"; (verde)
    Y haci me quedó
    http://produccionskynet.es.tl/

    ResponderEliminar
  18. A mi no me va el código, al ponerlo en la web, se me cambia la plantilla comppleta apareciendome un coche. Esta es mi web: perrolisto.jimdo.com

    ResponderEliminar
  19. Carlos: debes de copiar todo el código y pegarlo en tu web como un elemento widget/html. Si quieres que salga en toda la página tienes que ponerlo en la barra lateral.


    Sebastian: gracias por el aporte :D


    porrolisto: Es por el tipo de plantilla o por otros códigos que tengas instalados, en esos casos es recomendable no usarlos.

    ResponderEliminar
  20. Si me funciono gracias pero no se puede cambiar de color?

    ResponderEliminar
  21. club penguin XD: Si quieres cambiar el color tienes quitar
    f0f
    y poner ahí el color que quieres :)

    ResponderEliminar
  22. Exelente amigos, me resulta mucho los trucos. Exitos..

    ResponderEliminar
    Respuestas
    1. Freddy, gracias. Cuando quieras compartes tu página para ver como te quedó =)

      Eliminar
  23. Pero Daniel, una cosita ¿ Cómo cambio el color cambio f0f y no me sale pongo blue, azul y nada. ¿ Qué hago ?

    ResponderEliminar
  24. Me encanto este efecto, es el primer truco que utilizo y esta genial, le cambie el color a uno azul, encontre la siguiente página en donde seleccionas el color que quieras en el selector de colores y en el cuadro de la derecha inferior te aparece el código, pegas ese en lugar de f0f y ya queda listo el cambio de color de la nieve. =)

    ResponderEliminar
    Respuestas
    1. Ahhh esta es la página jiji
      http://html-color-codes.info/codigos-de-colores-hexadecimales/

      Eliminar
    2. Muchas gracias por compartir :D

      Eliminar
  25. PERDON PERO NO ENTIENDO,CUAL ES LA PARTE LATERAL DE LA QUE HABLAN Q HAY QUE PONERLO PARA QUE SALGA EN TODA LA PAGINA, PODRIAN EXPLICARMELO? GRACIAS

    ResponderEliminar
    Respuestas
    1. La barra lateral de tu página, debajo de la publicidad de jimdo podría ser. En conclusión agregas el código y lo arrastras para abajo de la publicidad y ya :)

      Eliminar
  26. oooo siiiiiiii muy bueno es mi primera incursion en esta pagina de trucos y esta muy buena creo que le sacare provechoooo
    gracias desde coquimbo ,,chile,,,
    www.arriendosencoquimbo.com

    ResponderEliminar
    Respuestas
    1. Wauu! un saludo hasta allá y recuerda que estamos para servirte :)

      Eliminar
  27. Respuestas
    1. Mira este tutorial... http://www.truco95.com/2012/05/como-poner-estos-codigos-en-blogger.html

      Eliminar
  28. no se cual es el codigo jajajaja

    ResponderEliminar
  29. Hola Daniel, me gusto mucho tu truco pero lo quiero color blanco por que mi jimdo es fondo rosado, espero me ayudes, y no olvides visitar mi web. Felicitaciones por tu nueva web, saludos.

    ResponderEliminar
    Respuestas
    1. Me alegra que te guste el blog :) para cambiar el color a blanco entonces en vez de

      var colour="#f0f"

      tienes que poner

      var colour="#ffffff"

      Eliminar
  30. Mola !!
    Lastima que en mi web no me funko XD

    ResponderEliminar
  31. Perdona Si Funka Esta chingon gracias

    ϟƘƦƖןןΣ✘ = ϟ∑x ƒoƦ my ∑AƦϟ

    ☆┌─┐ ─┐☆
     │▒│ /▒/
     │▒│/▒/ R2L Piedra [visor.site88.net]
     │▒ /▒/─┬─┐
     │▒│▒|▒│▒│
    ┌┴─┴─┐-┘─┘
    │▒┌──┘▒▒▒│
    └┐▒▒▒▒▒▒┌┘
     └┐▒▒▒▒┌

    ResponderEliminar
  32. Muchas gracias amigo me quedo bien bonito en mi página que la estoy amoblando recién, garcías muy buena tu página

    ResponderEliminar
  33. Me funsiomo y quedo bien en mi web www.rodrigon10rex.jimdo.com

    ResponderEliminar
  34. en mi webo solo se ve x los lados,x encima de la pagina cm aqui no :´(

    ResponderEliminar
  35. Hola me no entiedo que tengo que copiar me lo pueden decir porfavor? Gracias

    ResponderEliminar
    Respuestas
    1. Tienes que copiar el texto extraño que tiene el fondo gris.

      Eliminar
  36. Excelente amigo me sirvió al 100 muy buen aporte... no se podrá que en vez de que salgan del mouse caigan por si solo desde arriba en toda la pagina.

    ResponderEliminar
  37. hola daniel gran efecto me va bn pero solo se ve en los lados en blanco cuando el puntero esta encima de algo escrito no se ve te dejo mi pagina le exas un ojo haber si se puede corregir y muxas gracias x compartir esto con nostros

    www.fixreparo.com

    ResponderEliminar
  38. Es justo el efecto que andaba buscando, gracias por el aporte. Un saludo.

    ResponderEliminar
  39. Es posible cambiar el signo de un + a un * ??

    Gracias

    ResponderEliminar
    Respuestas
    1. No, lo siento. El script ya viene así y es mínimo lo que podemos hacer. Trataré de buscar otro :)

      Eliminar
  40. hol agracias por el aporte y quiero saber si se puede cambiar el tamaño de la nieve

    ResponderEliminar
  41. para quitar el efecto o modificarlocomo puedo hacelo ?? no veo a la hora de editar el widget

    ResponderEliminar
    Respuestas
    1. Lastimosamente lo único que podemos modificarle a este widget es el color, ya viene casi que todo hecho y es muy difícil modificarlo

      Eliminar
  42. Magnífico blog. Es una fuente inagotable de recursos para hacer más vistosas nuestras páginas. Gracias a gente como tú, los profanos en la materia nos lucimos con nuestros sites.

    Muchas Gracias.

    ResponderEliminar
  43. ME ENCANTAN TUS TRUCOS! ME AYUDAN MUCHISIMO MUCHAS GRACIAS :3

    ResponderEliminar
  44. Muy Bueno y como quitar el efecto? Gracias!

    ResponderEliminar
  45. Perdon no especifique,quiero quitar el efecto de nieve,estoy en jimdo

    ResponderEliminar
  46. HOLA ES LA PRIMERA VEZ QUE HAGO UNA PAGINA Y QUIERO SABER UNA VEZ QUE ABRI COMO O A DONDE VOY PARA CREAR EL EFECTO NIEVE Y EL EFECTO DESPLIEGUE DE MI PAGINA CUANDO ABRO. NO TENGO NI IDEA

    ResponderEliminar
  47. POR FI NECESITO QUE SE ME EXPLIQUE. GRACIAS

    ResponderEliminar
  48. Hice el truco de la lluvia (mouse), te cuento que fue increíble. copie el código como lo dices y funciono de una. Gracias, aplicaré a la pagina que estoy creando nuevas cosas gracias a su ayuda.

    ResponderEliminar
  49. me gusto genial http://filopensantes.jimdo.com/peliculas-online-gratis/

    ResponderEliminar
  50. hola me funciona perfecto per quisiera ponerlo en un archivo externo y no me funciona... espero que me ayudes ... gracias

    ResponderEliminar
  51. Hola genial, muchas gracias!!!, funciona muy bien y queda perfecto el color!!

    ResponderEliminar
  52. Sos un groso amigo.... muchas gracias por tu aporte me gustaria con mucha practica y lectura poder a llegar a tus conocimientos muchas gracias por tus aportes

    ResponderEliminar
  53. Gracias, por personas como usted, que están innovando cosas nuevas y lo más importante. "Que comparten su conocimiento.
    Beto.

    ResponderEliminar
  54. que bueno, a la primera, sin problemas

    ResponderEliminar
  55. Saludos desde Cuba. NO me funciona, amigo. Pegué el código en el sitio correspondiente, pero mi blog ni se enteró. Podrías ayudarme?

    ResponderEliminar
  56. Si Me Funciono Gracias Esta Es Mi Pagina!!!

    http://miguelnaranjo.jimdo.com/

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

    ResponderEliminar
  58. Hola! en primero lugar, que buenos códigos en verdad mil like (y) y muchas gracias son muy buenos, y por segundo tengo una pregunta yo hice mi pagina en publisher pero me gustaría agregarle algunos cogidos como este por ejemplo, y pues lo que hice fue fue abrir el código fuente de la pagina, y pues copie y peque a bloc de notas le agregue el código este de la nieve, y al abrirla solo aparece la nieve en la primer pagina y en los otros enlaces no :c y me gustaría saber como hacer que me aparezca en todas, te agradecería mucho si me das una respuesta!!

    ResponderEliminar
  59. gracias por el aporte muy bueno

    ResponderEliminar
  60. me gustaria que me ayudara instalo todo bien y en la visualizacion se ve que quedo bien pero al poner la pagina principal no se muestra el efecto

    si te puedes poner en contacto conmigo te lo agradeceria amigo aqui mi skype:
    javier.gonzalez2045

    ResponderEliminar
  61. al igual que tu me gusta programar ese código me parece bueno me encantaría estoy creando un codigo para que cuando pase el puntero por una imagen este se convierta en una imagen gif me gustaría que me ayudaras jhonka.jimdo.com esta pagina la cree para probarlo amigo
    mi puntero lo tengo pero con letras y lo convine con el tuyo es muy bueno

    ResponderEliminar
  62. excelente me funciono de 10 pero no habria forma de cambiar los ++++ por *****

    ResponderEliminar
  63. me gustan mucho tus trabajos ya son muchos los que utilizo en mi blog te doy la gracias ami como novato me ayudas mucho el único que no me fusione es este de nieve no debo aselo bien supongo lo mismo no tengo que copiarlo entero muchas gracias por tu trabajo

    ResponderEliminar
  64. por fin lo e conseguido muchas gracias era un problema mio fusiona fantástico lo único que le pongo blanco y no me resurta

    ResponderEliminar
  65. Muchas gracias por el aporte funciona muy bien el código y te felicito por tu sitio es muy interesante

    ResponderEliminar
  66. http://www.suenosdeprincesas.tk3.net

    ResponderEliminar
  67. Me funciono de maravilla. Muchas Gracias!!...me gustaría si se puede reemplazar el sparkles por letras por ejemplo y como lo haríia?

    ResponderEliminar