Imágenes en movimiento en nuestro blog

• Buffer
• Tweet

• Buffer
• Tweet

Si has llegado a este blog a través de un link roto, o queriendo encontrar una página que no existe, te habrás dado cuenta de la hermosisima (?) página de error 404 que tenemos, es muy fácil de lograr una página así, o hablando en serio, una linda página de error.

El efecto de las nubes moviéndose, inspirado en lo explicado por Gema,  lo logramos fácilmente con un poco de código en la plantilla de nuestro blog:

Para que las nubes puedan moverse, debemos descargar jquery.easing.1.3.js y subirlo a nuestro servidor.

Agregar el siguiente código al header.php entre las etiquetas HEAD:

<script src='RUTA_DONDE_ALOJE_JQUERY/jquery.easing.1.3.js' type='text/javascript'/></script>
<script src='http://jqueryjs.googlecode.com/files/jquery-1.3.2.js' type='text/javascript'/></script>

<script type='text/javascript'>
		$(document).ready(function() {
			setTimeout("animation()",300);
		});

		function animation(){
                        nube1();
						nubes2();
						nubes3();
						nubes4();
		}
				function nube1(){
			$("#nube1").animate({left:"+=85%"},30000).animate({left:"-0px"}, 30000)
			setTimeout("nube1()",5000);
		}
				function nubes2(){
			$("#nubes2").animate({left:"+=85%"},40000).animate({left:"-0px"}, 60000)
			setTimeout("nubes2()",5000);
		}
                function nubes3(){
			$("#nubes3").animate({left:"+=85%"},50000).animate({left:"-0px"}, 40000)
			setTimeout("nubes3()",5000);
		}
		        function nubes4(){
			$("#nubes4").animate({left:"+=85%"},60000).animate({left:"-0px"}, 50000)
			setTimeout("nubes4()",5000);
		}
	</script>

Allí podemos jugar un poco con los valores para determinar la velocidad de movimiento de las nubes por ejemplo.

Agregamos lo siguiente a nuestro archivo de CSS:

#nube1{ position:absolute; top:220px; left: 0px; z-index:6; }
#nubes2{ position:absolute; top:300px; left: 0px; z-index:5; }
#nubes3{ position:absolute; top:380px; left: 0px; z-index:4; }
#nubes4{ position:absolute; top:470px; left: 0px; z-index:5; }

Y lo siguiente en donde queremos que se muestren las imagenes,

<div id="nube1">
<img src="RUTA_DONDE_ALOJAMOS_IMAGEN/nube1.png"/>
</div>
<div id="nubes2">
<img src="RUTA_DONDE_ALOJAMOS_IMAGEN/nube2.png"/>
</div>
<div id="nubes3">
<img src="RUTA_DONDE_ALOJAMOS_IMAGEN/nube1.png"/>
</div>
<div id="nubes4">
<img src="RUTA_DONDE_ALOJAMOS_IMAGEN/nube2.png"/>
</div>

Las posibilidades son infinitas, solo queda jugar con la imaginación