Bouncing Yahoo Messenger ball Lession #8

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 position

 var 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 bounce

 anim.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 times

Click here to see the page in action


This is a series that documents my daughter’s curiosity to learn about computer programming

  1. Using CSS To Realize The Mock Up: Teaching Computer Programming To Kids Lesson #7

One thought on “Bouncing Yahoo Messenger ball Lession #8

  1. 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.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s