One of the coolest things about jQuery is that you can experiment with it, like with this animated robot. Here is a sample of how one can do this, based on Anthony Calzadilla’s design.

It’s easy to modify and loads fast, with the end product similar to Flash designs but with more advantages. Web designers and developers are sure to find this tutorial inspiring!

Click on the above image to see the demo.

Below are the codes for this awesome animation.

Markup

<div id="wrapper">

<div id="cloud-01">

<div id="cloud-02">

<div id="mountains-03">

<div id="ground">

<div id="full-robot">

<div id="branding"><h1>Robot Head.</h1></div>

<div id="content"><p> Robot Chest.</p></div>

<div id="sec-content"><p> Robot Pelvis.</p></div>

<div id="footer"><p> Robot Legs.</p></div>

</div>

</div>

</div>

</div>

</div>

</div>

CSS Style

h1, p { position: absolute; left: -9999px; }
div {position: relative;}
#wrapper { background: #bedfe4 url(../images/sun.png) no-repeat left -30px; border: 5px solid #402309;}
#cloud-01 { background: url(../images/clouds-01.png) no-repeat left -100px; }                                                         
#cloud-02 {                  background: url(../images/clouds-02.png) no-repeat left top; }
#mountains-03 { background: url(../images/mountain-03.png) no-repeat left bottom; }
#ground { background: url(../images/ground-05.png) no-repeat left bottom; }
#full-robot { width: 271px; }
#branding {
                    background: url(../images/robot-head.png) no-repeat center top;
                    width: 271px;
                    height: 253px;
                    z-index: 4;
                    }
#content {
                    background: url(../images/robot-torso.png) no-repeat center top;
                    width: 271px;
                    height: 164px;
                    z-index: 3;
                    margin-top: -65px;
                    }
#sec-content {
                    background: url(../images/robot-hips.png) no-repeat center top;
                    width: 271px;
                    height: 124px;
                    z-index: 2;
                    margin-top: -90px;
                    }
#footer {
                    background: url('../images/robot-legs.png') no-repeat center top;
                    width: 271px;
                    height: 244px;
                    z-index: 1;
                    margin-top: -90px;
                    }

jQuery Javascript

$(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);
}

Incoming search terms for the article:

• jquery robot
• jquery cartoon
• jquery background-position
• robot web design
• robot-torso png jquery
• jquery animate z-index
• jquery animated cartoon
• jquery animate robot
• jquery animation position
• jquery animation robot sample