Dhtml Animation Bounce

Changing a circle to an elliptical path is simple

Change the line

document.getElementById("piccy").style.top=90*Math.cos(position)+125+'px';

to

document.getElementById("piccy").style.top=20*Math.cos(position)+125+'px';

In fact we can remove the change in the .top property we can produce a nice bounce effect

Change the line

document.getElementById("piccy").style.top=20*Math.cos(position)+125+'px';

to

document.getElementById("piccy").style.top=125+'px';

Bounce Animation A working example of the bounce animation

Planets A more sophisticated example of the elipse animation.

Exercise
Build a page that bounces a ball off the sides of the screen.
(hint: You may find the screen.width property useful)