I found the "edge of the cliff" while allowing the robot to roll multiple times without resetting the backgrounds. From there I thought it would be fun to have him fall :) Now I'm looking into adding some fun sound effects :) I'll let ya know how that goes in a couple hours...
On Nov 7, 8:58 pm, "anthony.calzadilla" <[EMAIL PROTECTED]> wrote: > Thats incredible! How did you do that?! I'm going to dig into your > code and try to figure it out... AWESOME! > > -A > > On Nov 7, 8:50 pm, CodingCyborg <[EMAIL PROTECTED]> wrote: > > > Well, I decided to add some more fun stuff :) > > >http://codingcyborg.com/jQueryFun/Robot/robotHumor.html > > > There are now some "movement" images on the wheels. And I added an old > > school off the cliff cartoon style ending :) > > > On Nov 7, 11:58 am, "anthony.calzadilla" > > > <[EMAIL PROTECTED]> wrote: > > > 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]
