Text Resizer Text Resizer
February 8th, 2012
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 PrintText 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.

Post to Twitter

Related posts:

  1. Personalizando menus con listas & CSS
  2. Alternando el Color de las filas de una tabla usando Clases CSS

About

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!

Leave a Reply

You must be logged in to post a comment.

Back to Top