Text Resizer Text Resizer
September 9th, 2010
You're browsing: Scriptmatico.Com » General » Creando un Robot animado Usando jQuery y CSS

Creando un Robot animado Usando jQuery y CSS

Posted on Feb 18 in Generalby adminPrintText Resizer Text Resizer

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:

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:

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:

PLAIN TEXT
JavaScript:
  1. $(document).ready(function(){
  2. $('#cloud-01').css({backgroundPosition: '0 -80px'});
  3. $('#cloud-02').css({backgroundPosition: '0 -30px'});
  4. $('#mountains-03').css({backgroundPosition: '0 50px'});
  5. $('#trees-04').css({backgroundPosition: '0 50px'});
  6. $('#ground').css({backgroundPosition: 'left bottom'});
  7. $('#branding').css({backgroundPosition: 'center 0'});
  8. $('#content').css({backgroundPosition: 'center 0'});
  9. $('#sec-content').css({backgroundPosition: 'center 0'});
  10. $('#footer').css({backgroundPosition: 'center 0'});
  11. $('#wrapper').css({overflow: "hidden"});
  12.  
  13.     $('#klicker').click(function(){
  14.         $('#cloud-01').animate({backgroundPosition: '(-500px -80px)'}, 20000);
  15.         $('#cloud-02').animate({backgroundPosition: '(-625px -30px)'}, 20000);
  16.         $('#mountains-03').animate({backgroundPosition: '(-2500px 50px)'}, 20000);
  17.         $('#ground').animate({backgroundPosition: '(-5000px bottom)'}, 20000);
  18.  
  19.     startHim();
  20.  
  21.     $("#full-robot").animate({left:"50%",marginLeft:"-150px"}, 2000);
  22.     setTimeout("leaveScreen()",15000);
  23.     });
  24.  
  25. });
  26.  
  27. var num = 1;
  28.  
  29. function startHim(){
  30.     num++;
  31.     $("#sec-content").animate({top:"-=5px"},150).animate({top:"+=5px"},150);
  32.     $("#content,#branding").animate({top:"-="+num+"px"},150).animate({top:"+="+num+"px"},150);
  33.     if(num<4){
  34.         setTimeout("startHim()",300);
  35.     } else {
  36.         setTimeout("bounceHim()",300);
  37.     }
  38. }
  39.  
  40. function bounceHim(){
  41.     $("#sec-content,#branding").animate({top:"-=4px"},150).animate({top:"+=4px"},150);
  42.         $("#content").animate({top:"-=8px"},150).animate({top:"+=8px"},150);
  43.     setTimeout("bounceHim()",300);
  44. }
  45.  
  46. function leaveScreen(){
  47.     $("#full-robot").animate({left:"100%",marginLeft:"0px"}, 2000);
  48. }

Pueden ver el demo de la aplicacion aqui.

O leer el articulo del Autor aqui.

Compártelo!

Post to Twitter


  • No Related Post

About admin

Entry Details: This entry was posted on Miércoles, Febrero 18th, 2009 at 0:45, by admin, and is filed under General. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site. Print This!
  • No Related Post

One Comment

Trackbacks / Pingbacks

Leave a Reply

*
To prove you're a person (not a spam script), type the security word shown in the picture. Click on the picture to hear an audio file of the word.
Click to hear an audio file of the anti-spam word

Back to Top
[x] Cerrar
E-mail