Buscador
.

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>


79 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
    Respuestas
    1. intenta con un código, o con otros colores en inglés.

      Eliminar
    2. •COMO LO INSTALO? NO ENTIENDO :S

      Eliminar
  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
    Respuestas
    1. problema resuelto cambie el diseño gracias

      Eliminar
  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