Nubes animadas en el fondo del Blog

Hace tiempo visitaba un blog y vi un bonito efecto en el fondo del mismo. Eran unas nubes en movimiento muy llamativas que me dejaron con ganas de probarlas.

Pues bien, ya las probé! y ahora quiero que lo hagas tú. Ten en cuenta que este efecto utiliza Jquery en su versión 1.3.2. Entonces si deseas ponerlo en tu blog, debes asegurarte de que esta versión este instalada.

Si tienes una version diferente de Jquery probablemente no funcione el efecto.

La nubes animadas son estas:

Échale un vistazo al efecto en funcionamiento: Demo

Vamos a comenzar con la aplicación del efecto a nuestro blog

1. Añadir las nubes a la plantilla

Ve a Plantilla - Editar HTML, presiona F3, busca ]]></b:skin>, y justo antes pega el siguiente código.

#cover-cloud{height:200px;left:0;min-width:1074px;position:absolute;width:100%;z-index:0}

#cloud{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlG1vL1WDSyHLCb6Gm-7WSHhvWjk2PjnJDjZ1QF2oCLmWEmDbiSIIBh4pe5fqcSVB7VnYfNDMb4IdJ6vgJUtfP-vS7U4zI5ifApqR-duC_a2oETwybf4fIwgi07ncBp1qc8njchzxGEIU/s1600/cloud1.png) repeat-x 0 0;height:188px;position:absolute;width:100%;z-index:1}

#cloud2{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvwWIk9YV-NJB52YVm9jW7fYVuyYt6WdBwMDoTtN1flp0JfmfPSjhees8WBCL-pqsVG72yC7wXqHZBccuBOwxaSi1227l6gxR8jIEgtz2MEBWGqVl0B7OerC7uinj02GBdOr8_tSbUut0/s1600/cloud2.png) repeat-x 0 0;height:125px;position:absolute;width:100%;z-index:2}

#cloud3{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggSA9NQujLAkM0YZpRv0Q2Y3TST2GA5TzyCJDnLT4hlLYK8Bhfxnn8QZXQMWGtv29JENkT6vGrUr1qXYJlPgbrFBi9wAuN0X2XAZi-c0t6lOZTKGT4nVesMAZb7qV_Bqr4l0HqGVUIlJM/s1600/cloud3.png) repeat-x 0 0;height:46px;position:absolute;width:100%;z-index:3}

2. Agregar el script

Alli mismo en la plantilla busca </head>, y justo antes pega este script

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>//<![CDATA[
(function(e){e._spritely={animate:function(t){var n=e(t.el);var r=n.attr("id");if(!e._spritely.instances){e._spritely.instances={}}if(!e._spritely.instances[r]){e._spritely.instances[r]={current_frame:-1}}var i=e._spritely.instances[r];if(t.type=="sprite"){var s;var o=function(n){var i=t.width,o=t.height;if(!s){s=[];total=0;for(var u=0;u<t.no_of_frames;u++){s[s.length]=0-total;total+=i}}if(e._spritely.instances[r]["current_frame"]>=s.length-1){e._spritely.instances[r]["current_frame"]=0}else{e._spritely.instances[r]["current_frame"]=e._spritely.instances[r]["current_frame"]+1}n.css("background-position",s[e._spritely.instances[r]["current_frame"]]+"px 0");if(t.bounce&&t.bounce[0]>0&&t.bounce[1]>0){var a=t.bounce[0];var f=t.bounce[1];var l=t.bounce[2];n.animate({top:"+="+a+"px",left:"-="+f+"px"},l).animate({top:"-="+a+"px",left:"+="+f+"px"},l)}};o(n)}else if(t.type=="pan"){if(t.dir=="left"){e._spritely.instances[r]["l"]=e._spritely.instances[r]["l"]-(t.speed||1)||0}else{e._spritely.instances[r]["l"]=e._spritely.instances[r]["l"]+(t.speed||1)||0}if(e.browser.msie){var u=e(n).css("background-position-y")||"0";e(n).css("background-position",e._spritely.instances[r]["l"]+"px "+u)}else{var u=(e(n).css("background-position").split(" ")||" ")[1];e(n).css("background-position",e._spritely.instances[r]["l"]+"px "+u)}}},randomIntBetween:function(e,t){return parseInt(rand_no=Math.floor((t-(e-1))*Math.random())+e)}};e.fn.extend({spritely:function(t){var t=e.extend({type:"sprite",do_once:false,width:null,height:null,fps:12,no_of_frames:2},t||{});t.el=this;t.width=t.width||e(this).width()||100;t.height=t.height||e(this).height()||100;var n=function(){return parseInt(1e3/t.fps)};if(!t.do_once){window.setInterval(function(){e._spritely.animate(t)},n(t.fps))}else{e._spritely.animate(t)}return this},sprite:function(t){var t=e.extend({type:"sprite",bounce:[0,0,1e3]},t||{});return e(this).spritely(t)},pan:function(t){var t=e.extend({type:"pan",dir:"left",continuous:true,speed:1},t||{});return e(this).spritely(t)},flyToTap:function(t){var t=e.extend({el_to_move:null,type:"moveToTap",ms:1e3,do_once:true},t||{});if(t.el_to_move){e(t.el_to_move).active()}if(e._spritely.activeSprite){if(window.Touch){e(this)[0].ontouchstart=function(t){var n=e._spritely.activeSprite;var r=t.touches[0];var i=r.pageY-n.height()/2;var s=r.pageX-n.width()/2;n.animate({top:i+"px",left:s+"px"},1e3)}}else{e(this).click(function(t){var n=e._spritely.activeSprite;e(n).stop(true);var r=n.width();var i=n.height();var s=t.pageX-r/2;var o=t.pageY-i/2;n.animate({top:o+"px",left:s+"px"},1e3)})}}return this},active:function(){e._spritely.activeSprite=this;return this},activeOnClick:function(){var t=e(this);if(window.Touch){t[0].ontouchstart=function(n){e._spritely.activeSprite=t}}else{t.click(function(n){e._spritely.activeSprite=t})}return this},spRandom:function(t){var t=e.extend({top:50,left:50,right:290,bottom:320,speed:4e3,pause:0},t||{});var n=e(this).attr("id");var r=e._spritely.randomIntBetween;var i=r(t.top,t.bottom);var s=r(t.left,t.right);e("#"+n).animate({top:i+"px",left:s+"px"},t.speed);window.setTimeout(function(){e("#"+n).spRandom(t)},t.speed+t.pause);return this},makeAbsolute:function(){return this.each(function(){var t=e(this);var n=t.position();t.css({position:"absolute",marginLeft:0,marginTop:0,top:n.top,left:n.left}).remove().appendTo("body")})}})})(jQuery);try{document.execCommand("BackgroundImageCache",false,true)}catch(err){}//]]></script>

<script type='text/javascript'>(function($){$(document).ready(function(){$('#cloud').pan({fps: 30, speed: 1, dir: 'right'});$('#cloud2').pan({fps: 30, speed: 2, dir: 'right'});$('#cloud3').pan({fps: 30, speed: 0.5, dir: 'right'});});})(jQuery);</script>

El codigo seleccionado al principio es Jquey 1.3.2, recuerda omitirlo si ya lo tienes en tu blog.

Los números en color rojo, son la velocidad de cada una de las nubes. Puedes cambiarlas a tu gusto.

3. Finalizar

Solo nos queda ir a <body> y pegar después, el siguiente código.

<div id='cover-cloud'>
<div id='cloud'/>
<div id='cloud2'/>
<div id='cloud3'/>
</div>

Ahora guarda tu plantilla, y entra a tu blog para ver el efecto.

Eso es todo por hoy, espero haberte ayudado a personalizar tu sitio web.

Saludos!