jueves, 3 de diciembre de 2015

Poner efecto de nieve cayendo en el blog (Navidad)

El demo es tomado gentilmente de -Diversas y Variadas-
Inicia Diciembre y con ello la navidad viene en pocos días así que, para darle un toque navideño a nuestros blogs por qué no poner unos copos de nieve cayendo aleatoriamente por todo el sitio:
Si con la imagen no te basta veamos un demo:

http://probandotres.blogspot.com/

Bonito cierto? , Para agregar este buen efecto a nuestro blog basta con hacer un par de pasos y estuvo veamos:

1. Ir a Diseño > Añadir un Gadget > HTML/JavaScript y allí pegaremos el siguiente código:
<script type='text/javascript'>
var fallObjects=new Array();function newObject(url,height,width){fallObjects[fallObjects.length]=new Array(url,height,width);}

var numObjs=20, waft=50, fallSpeed=10, wind=0;
newObject("http://2.bp.blogspot.com/--fII5xz-9vY/UM-djWHHwgI/AAAAAAAABrI/tEKS6_ctv_k/s400/nieve2_jessi_diyva.png",22,22);
newObject("http://3.bp.blogspot.com/-DPHwVIctTlg/UM-di9jKOiI/AAAAAAAABq8/wV567ynxL2U/s400/nieve1_jessi_diyva.png
",22,22);

function winSize(){winWidth=(moz)?window.innerWidth-180:document.body.clientWidth-180;winHeight=(moz)?window.innerHeight+500:document.body.clientHeight+500;}
function winOfy(){winOffset=(moz)?window.pageYOffset:document.body.scrollTop;}
function fallObject(num,vari,nu){
objects[num]=new Array(parseInt(Math.random()*(winWidth-waft)),-30,(parseInt(Math.random()*waft))*((Math.random()>0.5)?1:-1),0.02+Math.random()/20,0,1+parseInt(Math.random()*fallSpeed),vari,fallObjects[vari][1],fallObjects[vari][2]);
if(nu==1){document.write('<img id="fO'+i+'" style="position:fixed;" src="'+fallObjects[vari][0]+'">'); }
}
function fall(){
for(i=0;i<numObjs;i++){
var fallingObject=document.getElementById('fO'+i);
if((objects[i][1]>(winHeight-(objects[i][5]+objects[i][7])))||(objects[i][0]>(winWidth-(objects[i][2]+objects[i][8])))){fallObject(i,objects[i][6],0);}
objects[i][0]+=wind;objects[i][1]+=objects[i][5];objects[i][4]+=objects[i][3];
with(fallingObject.style){ top=objects[i][1]+winOffset+'px';left=objects[i][0]+(objects[i][2]*Math.cos(objects[i][4]))+'px';}
}
setTimeout("fall()",31);
}
var objects=new Array(),winOffset=0,winHeight,winWidth,togvis,moz=(document.getElementById&&!document.all)?1:0;winSize();
for (i=0;i<numObjs;i++){fallObject(i,parseInt(Math.random()*fallObjects.length),1);}
fall();
</script>
2. Guardamos y vamos a ver el blog a ver que tal ha quedado el efecto.

Lo que está en color Naranja es la URL de la imagen que hace el papel de copo de Nieve la pueden cambiar si así lo desean, pero recuerden que debe ser en PNG para que no quede un poco ordinario al ver el efecto.
Hasta la próxima BloggeRs,

14 comentarios:

  1. Valeeee, me guardo el código, el año pasado no la puse porque no me atreví, pero este es fácil al ser un gadget.
    Saluditos.

    ResponderEliminar
    Respuestas
    1. De nada zorrete la verdad trato de hacer todo lo más sencillo posible :). Saludos !!

      Eliminar
  2. Muchas gracias!!!!!!! Lo buscaba hace dias y ninguno me funcionaba pero este si!!!!!!!!!!!!!!!!. Ahhhhhhhhhhhh gracias desde México

    ResponderEliminar
  3. Muchas gracias por el aporte. Me encanta!!

    ResponderEliminar
    Respuestas
    1. Hola Conchis Gonzalez De nada es con gusto saludos.- y feliz diciembre !!

      Eliminar
  4. Muchas gracias, genial código!

    ResponderEliminar
    Respuestas
    1. Hola amigo me alegra que te sirva feliz inicio de Diciembre..

      Saludos,

      Eliminar
  5. genial muchas gracias funciona perfecto http://www.portalfoxmix.cl/radioenvivo/

    ResponderEliminar
    Respuestas
    1. Hola, Gracias por comentar me alegra te sirva.

      Saludos,

      Eliminar
  6. ¡¡Genial, me encanta!! Ya está puesto y funciona a la perfección. Aquí dejo mi blog de Educación por si queréis echare un vistazo www.diarioestrelladeunamaestra.blogspot.com

    Gracias de nuevo.

    ¡Saludos!

    ResponderEliminar
    Respuestas
    1. Hola Rebeca De La Cruz Se ve genial con el efecto buen blog de por cierto..

      Saludos :) ,

      Eliminar
  7. Respuestas
    1. Hola Lidia Madueño Me alegra que te funcione al 10/10..

      Saludos,

      Eliminar

SÍGUENOS EN: