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:
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,
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.
ResponderBorrarSaluditos.
De nada zorrete la verdad trato de hacer todo lo más sencillo posible :). Saludos !!
BorrarMuchas gracias!!!!!!! Lo buscaba hace dias y ninguno me funcionaba pero este si!!!!!!!!!!!!!!!!. Ahhhhhhhhhhhh gracias desde México
ResponderBorrarHola me alegra te funcione saludos !!!
BorrarMuchas gracias por el aporte. Me encanta!!
ResponderBorrarHola Conchis Gonzalez De nada es con gusto saludos.- y feliz diciembre !!
BorrarMuchas gracias, genial código!
ResponderBorrarHola amigo me alegra que te sirva feliz inicio de Diciembre..
BorrarSaludos,
genial muchas gracias funciona perfecto http://www.portalfoxmix.cl/radioenvivo/
ResponderBorrarHola, Gracias por comentar me alegra te sirva.
BorrarSaludos,
¡¡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
ResponderBorrarGracias de nuevo.
¡Saludos!
Hola Rebeca De La Cruz Se ve genial con el efecto buen blog de por cierto..
BorrarSaludos :) ,
¡PERFECTO!
ResponderBorrarHola Lidia Madueño Me alegra que te funcione al 10/10..
BorrarSaludos,
Exceelnte, muchas gracias.
ResponderBorrarCon gusto saldos,
BorrarHola el efecto es excelente, pero en mi caso no funciona "encima" de un slider pasan los copos por detras..... Como hago para que el efecto esté sobre TODO?
ResponderBorrarHola Javier, por favor cuál es la URL de tu blog?
BorrarSaludos,
Hola, funciona si pongo las imágenes localmente no por url?
ResponderBorrarHola Elio en Blogger no, no sé si lo uses en otra web distinto a Blogger como CMS.
BorrarSaludos,
Hola el efecto es excelente, pero en mi caso no funciona "encima" de un slider pasan los copos por detras..... Como hago para que el efecto esté sobre TODO?
ResponderBorrarla pagina es fiestafmradiomallorca.es
Hola ¿Cuál es la URL de tu blog?
BorrarSaludos,
Hola buenas, cambio la dirección y no me cambia la imagen..deja de servir el codigo. podrias colocar un ejemplo..para ver que hago mal. muchas gracias
ResponderBorrarGracias a ti ya tengo el blog preparado para las navidades. Un saludo.
ResponderBorrarEs con gusto
BorrarSaludos,
Me ha sido mucha utilidad, gracias
ResponderBorrarEs con gusto...
BorrarSaludos,
Gracias men me funciono muy bien ya tenia rato buscadolo
ResponderBorrarEs con gusto...
BorrarSaludos,
hola muy buenas tardes me doy cuenta qu etu codigo esta muy bien hecho pero si lo miras desde un mobil la nieve solo cae en la orilla como solucionas eso ???
ResponderBorrarHola actualmente el truco solo funciona para versiones de escritorio....
BorrarSAludos,