Cómo crear un paisaje animado con jQuery y CSS

Hace un tiempo vimos cómo crear un fondo animado con Mootools, hoy vamos a ver cómo crear un paisaje animado con jQuery y CSS.

La animación de este ejemplo consiste en un bote que recorre un río, en éste se ven también el desplazamiento de las nubes.

Implementación

Primero tenemos que enlazar los archivos JS en la sección HEAD del HTML de la página, que en este caso son la biblioteca jQuery y el plugin Landscape:

EntradasRelacionados

4 Tips de Oracle para iniciarte en el mundo de la programación

Ventajas, desventajas y consejos al crear tu sitio web

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" 
type="text/javascript"><!--mce:0--></script>
<script src="landscape.js" type="text/javascript"><!--mce:1--></script>

Con la siguientes funciones animamos las nubes:

function cloudone(){
$("#cloudone").animate({left:"+=1200px"},10000).animate({left:"-200px"}, 0)
setTimeout("cloudone()",10000);
}
function cloudtwo(){
$("#cloudtwo").animate({left:"+=1500px"},15000).animate({left:"-300px"}, 0)
setTimeout("cloudtwo()",15000);
}
function cloudthree(){
$("#cloudthree").animate({left:"+=2000px"},20000).animate({left:"-600px"}, 0)
setTimeout("cloudthree()",20000);
}
function boat(){
//Tiempo necesario para mover el bote a la izquierda
$("#boat").animate({right:"+=1000px"},20000).animate({right:"-200px"}, 0)
setTimeout("boat()",20000);
}

Luego tenemos que iniciar la acción:

$(document).ready(function() {
setTimeout("cloudone()",10);
setTimeout("cloudtwo()",10);
setTimeout("cloudthree()",10);
setTimeout("boat()",10);
});

Luego creamos la estructura de la animación con HTML, el contenedor con el ID inner, es el que contiene toda la animación:

<div id="wrapper">
<div id="inner">
<div id="cloudone"><img src="images/clud1.png"></div>
<div id="cloudtwo"><img src="images/clud2.png"></div>
<div id="cloudthree"><img src="images/clud1.png"></div>
<div id="boat"><img src="images/boat.png"></div>
</div>
</div>

Por último el código CSS:

#wrapper {
width:800px;
height:600px;
/* Imagenprincipal que contiene el cielo, sol, rio y nubes
background-image:url(images/Untitled-3.jpg);
background-repeat:no-repeat;
margin-top:10px;
margin-left:auto;
margin-right:auto;
border: 10px solid #666;
}
#inner {
position:relative;
overflow:hidden;
width:800px;
height:600px;
margin:0px;
}
#cloudone {
position:absolute;
margin-top:2px;
margin-left:-200px;
filter:alpha(opacity=80);
/* CSS3 estandard */opacity:0.8;
}
#cloudtwo {
position:absolute;
margin-top:80px;
margin-left:-300px;
filter:alpha(opacity=60);
/* CSS3 estandard */opacity:0.6;
}
#cloudthree {
position:absolute;
margin-top:60px;
margin-left:-600px;
filter:alpha(opacity=70);
/* CSS3 estandard */opacity:0.7;
}
#boat {
margin-top:360px;
position:absolute;
margin-left:800px;
}