From the last session with C., we have a login screen. Now C. would like the little Yahoo! Messenger guy to bounce around.
Click here to see the page in action
She fired up TuxPaint and created a drawing of a spring
We used Preview to copy it and rotate it into horizontal spring
I started to read about the YUI animation library
First, we copy these 2 lines to include YUI libraries
<link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/3.2.0/build/cssfonts/fonts-min.css" />
http://yui.yahooapis.com/3.2.0/build/yui/yui-min.js
The happy face guy is in the div tag as id=”happy_home”
<center>
</div> </center>![]()
YUI has very simple syntax and she was intrigued with Y.one() syntax to create a node for #happy_home
YUI().use('anim', function(Y) { var node = Y.one('#happy_home');YUI has some sample code, at this point because I’m also learning Javascript and YUI, I experimented with the animation and finally was able to get the Yahoo! Messenger icon to bounce
var anim = new Y.Anim({ node: node, duration: .75, easing: Y.Easing.easeOut });node : is the the happy face guy with the speech bubble
duration: is how long the animation goes on each iteraction
easing : how you want the animation to easy into the positionvar bounceCurve = function(end) { var points = [], X = node.getX(); Y = node.getY(); points.push([X, Y - 60]); points.push([X, Y]); return points; };X, Y: is the point where the happy guy is
points : we create a point which is 60 pixels above where the happy guy is at, how high to bounceanim.set('to', { curve: bounceCurve(), }); anim.set('iterations', 100); anim.run(); //Y.one('document').on('click', anim.stop()); });to : We want the animation to run so that the happy face will go to the point at 60 pixels above the guy and
interactions: we want this to run for 100 timesClick here to see the page in action
This is a series that documents my daughter’s curiosity to learn about computer programming
One thought on “Bouncing Yahoo Messenger ball Lession #8”
Leave a Reply
Hi, do you need someone to proofread your content before you put it online? Misspelling words like Basic (Baic on the homepage) or Lesson (Lession on homepage) detracts from the perception of your authority.