This is Beautiful! To save yourself from the copy/paste to create the
repeated bounce, and to make the file smaller, you can simply replace
the three lines that were enormously long with this:
startHim();
And then add this at the bottom of the js file:
var num = 1;
function startHim(){
num++;
$("#sec-content").animate({top:"-=5px"},150).animate({top:"+=5px"},
150);
$("#content").animate({top:"-="+num+"px"},150).animate({top:"+="+num
+"px"},150);
$("#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").animate({top:"-=5px"},150).animate({top:"+=5px"},
150);
$("#content").animate({top:"-=5px"},150).animate({top:"+=5px"},150);
$("#branding").animate({top:"-=5px"},150).animate({top:"+=5px"},150);
setTimeout("bounceHim()",300);
}
This allows for more control of the looped animation and easier to
edit the "bounciness" of the robot. That's all I could enhance, if you
could call it that. It's an amazing display of js and jQuery skills,
and I admire you for that.
On Nov 5, 10:56 pm, "anthony.calzadilla"
<[EMAIL PROTECTED]> wrote:
> Hi all,
> I occasionally volunteer as a guest speaker for the web design class
> at my child's elementary school. I wanted to introduce them to jquery
> and html in a fun way so I created an animated jquery 'robot'. Now,
> I'm not really adept at javascript or any type of programming at all.
> I'm a designer turned wannabe' web developer :)
>
> I used multiple divs and transparent png's to create the different
> parts of the parallax background and the bouncing robot. The code I
> was able to piece together to make it work is absolutely horrendous,
> even for me. I was hoping maybe some of you jquery masters might be
> able to take a looksy and help me out?
>
> The url is: robot.anthonycalzadilla.com
> (I would just post the code but its so long it wouldn't be visibly
> viable)
>
> Anthony
> [EMAIL PROTECTED]
