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:

<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;
}

Colorario

En general, aunque nos puede parecer algo extenso es muy sencillo; la parte más larga de esta implementación es el código CSS.

Animated Landscape Using CSS and jQuery

Visitar: acrisdesign.com/2010/04/animated-landscape-using-css-and-jquery

Demo: acrisdesign.com/demo/landscape