Hi,
I changed the 'bounceHim' function a bit so that the different pieces
of the robot look like they are separated and bouncing individually:
function bounceHim(){
$("#sec-content,#branding").animate({top:"-=5px"},
150).animate({top:"+=5px"},150);
$("#content").animate({top:"-=8px"},150).animate({top:"+=8px"},150);
setTimeout("bounceHim()",300);
}
http://robot.anthonycalzadilla.com/
Once again thanks for your insight. I really am a complete novice at
programming in general. I'm really scrutinizing your code so as to
learn from it.
-Anthony
On Nov 7, 8:34 am, CodingCyborg <[EMAIL PROTECTED]> wrote:
> I just noticed, after looking over the code again, that since you have
> all three pieces of the robot that are bouncing bounce at the same
> time the line of code can be condensed into one. As well as the two
> that bounce together at the beginning.
> This:
>
> $("#content").animate({top:"-="+num+"px"},150).animate({top:"+="+num
> +"px"},150);
> $("#branding").animate({top:"-="+num+"px"},150).animate({top:"+="+num
> +"px"},150);
>
> Becomes this:
>
> $("#content,#branding").animate({top:"-="+num+"px"},
> 150).animate({top:"+="+num+"px"},150);
>
> And in the next function this:
>
> $("#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);
>
> Becomes this:
>
> $("#sec-content,#content,#branding").animate({top:"-=5px"},
> 150).animate({top:"+=5px"},150);
>
> Of course, if you wished to have each part bounce a different amount
> or at different rates you would need to set up different "timeouts"
> with different functions if they couldn't be set with the current 300
> ms function. But if you wanted something to go at half speed or a
> whole number multiple speed you could just changed how much code was
> in the function and the numbers associated with it. (If any of that
> makes sense.)
>
> But that saves more code, and again, makes the file a bit (Quite
> seriously only a few bits :P) smaller.
>
> On Nov 7, 12:44 am, "anthony.calzadilla"
>
> <[EMAIL PROTECTED]> wrote:
> > Wow! Thank you CodingCyborg! Thank You! I'm going to study and learn
> > from your code example and implement it into mine.
>
> > -Anthony
>
> > On Nov 7, 12:24 am, CodingCyborg <[EMAIL PROTECTED]> wrote:
>
> > > I made a few more modifications such that the robot doesn't keep
> > > bouncing and the sky keep moving when the ground has stopped. Though I
> > > did the cheap way, in the sense that I just made it a short clip
> > > rather than a full length repeat.
>
> > >http://codingcyborg.com/jQueryFun/Robot/robot.html
>
> > > That has the same basic directory set up, but with the modified
> > > script.js file for viewing.
>
> > > On Nov 6, 11:07 pm, CodingCyborg <[EMAIL PROTECTED]> wrote:
>
> > > > 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]
