Lluvia en tu blog

Si en invierno y navidades a much@s les da por poner nieve cayendo en su blog o web... ¿Porque no poner lluvia? La verdad es que es relativamente facil de conseguir este efecto. Para ello necesitamos un poco de Javascript, le añadimos un toque de CSS3 y ¡voila!, ya tenemos nuestra receta hecha (el codigo, quiero decir). Como podeis comprobar, funciona, mirad como esta diluviando sin parar en este mismo blog. Mientras cojo el paraguas, os cuento como podeis añadir esta animacion en vuestra pagina. Teneis que dirigiros a la plantilla, buscad la etiqueta <body> y justo debajo pegais el siguiente codigo y guardais los cambios. Saludos pasados por agua.

<div class="lluvia"></div><style>
.gotas {
  background:-webkit-gradient(linear,0% 0%,0% 100%, from(rgba(13,52,58,1) ), to(rgba(255,255,255,0.6))  );
  background: -moz-linear-gradient(top, rgba(13,52,58,1) 0%, rgba(255,255,255,.6) 100%);
 width:1px;height:89px;
 position: absolute;top:0px;z-index:99999;
 -webkit-animation: fall .63s linear infinite;
  -moz-animation: fall .63s linear infinite;
}
@-webkit-keyframes fall {
 to {margin-top:900px;}
}
@-moz-keyframes fall {
 to {margin-top:900px;}
}
</style><script type="text/javascript">
  //<![CDATA[
(function() {

var nbDrop = 200; 

function randRange( minNum, maxNum) {
  return (Math.floor(Math.random() * (maxNum - minNum + 1)) + minNum);
}

function createRain() {

 for( i=1;i<nbDrop;i++) {
 var dropLeft = randRange(0,980);
 var dropTop = randRange(-1000,1400);

 $('.lluvia').append('<div class="gotas" id="gotas'+i+'"></div>');
 $('#gotas'+i).css('left',dropLeft);
 $('#gotas'+i).css('top',dropTop);
 }

}

createRain();

})();
//]]>
</script>