Este hermoso ejercicio desde que lo lei me encanto y dedici publicarlo.

Este proyecto fue creado por varias capas vacías divs mutuamente con PNGs transparentes como imágenes de fondo.

Los fondos fueron animados a diferentes velocidades con jQuery un plug-in por Alexander Farkas. Este efecto simula una falsa animacion en 3-D de fondo el denominado «efecto de paralaje» procedentes de la vieja escuela de video juegos de desplazamiento lateral.

El robot está compuesto de manera similar a la animación de fondo de escena por varias capas DIVs juntos para crear las diferentes piezas del robot. El paso final, fue la animación del robot con jQuery.

A continuacion el codigo HTML Usado:

< View plain text >
HTML

  1. <div id="wrapper">
  2.  
  3.   <div id="cloud-01">
  4.   <div id="cloud-02">
  5.   <div id="mountains-03">
  6.   <div id="ground">
  7.  
  8.   <div id="full-robot">
  9.     <div id="branding"><h1>Robot Head.</h1></div>
  10.     <div id="content"><p> Robot Chest.</p></div>
  11.     <div id="sec-content"><p> Robot Pelvis.</p></div>
  12.     <div id="footer"><p> Robot Legs.</p></div>
  13.   </div>
  14.  
  15.   </div>
  16.   </div>
  17.   </div>
  18.   </div>
  19.  
  20. </div>

Lo Siguiente es añadir la hoja de estilos, y el codigo es el siguiente:

< View plain text >
css

  1. h1, p { position: absolute; left: -9999px; }
  2.  
  3. div {position: relative;}
  4.  
  5. #wrapper { background: #bedfe4 url(../images/sun.png) no-repeat left -30px; border: 5px solid #402309;}
  6.  
  7. #cloud-01 { background: url(../images/clouds-01.png) no-repeat left -100px; }                                                        
  8.  
  9. #cloud-02 { background: url(../images/clouds-02.png) no-repeat left top; }
  10.  
  11. #mountains-03 { background: url(../images/mountain-03.png) no-repeat left bottom; }
  12.  
  13. #ground { background: url(../images/ground-05.png) no-repeat left bottom; }
  14.  
  15. #full-robot { width: 271px; }
  16.  
  17. #branding {
  18.     background: url(../images/robot-head.png) no-repeat center top;
  19.     width: 271px;
  20.     height: 253px;
  21.     z-index: 4;
  22.     }
  23.  
  24. #content {
  25.     background: url(../images/robot-torso.png) no-repeat center top;
  26.     width: 271px;
  27.     height: 164px;
  28.     z-index: 3;
  29.     margin-top: -65px;
  30.     }
  31.  
  32. #sec-content {
  33.     background: url(../images/robot-hips.png) no-repeat center top;
  34.     width: 271px;
  35.     height: 124px;
  36.     z-index: 2;
  37.     margin-top: -90px;
  38.     }
  39.  
  40. #footer {
  41.     background: url('../images/robot-legs.png') no-repeat center top;
  42.     width: 271px;
  43.     height: 244px;
  44.     z-index: 1;
  45.     margin-top: -90px;
  46.     }

Y posteriormente lo que le da vida a nuestro robot:

$(document).ready(function(){
$(‘#cloud-01’).css({backgroundPosition: ‘0 -80px’});
$(‘#cloud-02’).css({backgroundPosition: ‘0 -30px’});
$(‘#mountains-03’).css({backgroundPosition: ‘0 50px’});
$(‘#trees-04’).css({backgroundPosition: ‘0 50px’});
$(‘#ground’).css({backgroundPosition: ‘left bottom’});
$(‘#branding’).css({backgroundPosition: ‘center 0’});
$(‘#content’).css({backgroundPosition: ‘center 0’});
$(‘#sec-content’).css({backgroundPosition: ‘center 0’});
$(‘#footer’).css({backgroundPosition: ‘center 0’});
$(‘#wrapper’).css({overflow: «hidden»});

$(‘#klicker’).click(function(){
$(‘#cloud-01’).animate({backgroundPosition: ‘(-500px -80px)’}, 20000);
$(‘#cloud-02’).animate({backgroundPosition: ‘(-625px -30px)’}, 20000);
$(‘#mountains-03’).animate({backgroundPosition: ‘(-2500px 50px)’}, 20000);
$(‘#ground’).animate({backgroundPosition: ‘(-5000px bottom)’}, 20000);

startHim();

$(«#full-robot»).animate({left:»50%»,marginLeft:»-150px»}, 2000);
setTimeout(«leaveScreen()»,15000);
});

});

var num = 1;

function startHim(){
num++;
$(«#sec-content»).animate({top:»-=5px»},150).animate({top:»+=5px»},150);
$(«#content,#branding»).animate({top:»-=»+num+»px»},150).animate({top:»+=»+num+»px»},150);
if(num<4){ setTimeout("startHim()",300); } else { setTimeout("bounceHim()",300); } } function bounceHim(){ $("#sec-content,#branding").animate({top:"-=4px"},150).animate({top:"+=4px"},150); $("#content").animate({top:"-=8px"},150).animate({top:"+=8px"},150); setTimeout("bounceHim()",300); } function leaveScreen(){ $("#full-robot").animate({left:"100%",marginLeft:"0px"}, 2000); } [/js] Pueden ver el demo de la aplicacion aqui.

O leer el articulo del Autor aqui.