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

Samsung muestra la evolución de SmartThings y presenta nuevas experiencias de dispositivos en SDC22

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

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