JavaScript
  1. Home
  2. Computing & Technology
  3. JavaScript
See More About:
This is a web page object.

Web Page Animation

12. Perpetual Motion
clr gif
Join the Discussion

Questions? Comments?

More of this Feature

Define Web Page Object Hide Until Page Loaded Scrolling With the Page Random Start Position Hide Again Now You See It Making it Move Select End Position Moving Vertically Speed of Movement Reversing Direction

We already know how to set up our object so that it can be moved backwards and forwards between two positions. Instead of having our visitor click on a link each time the object finishes moving in order to get it to move the other way we can make a minor change to the mover function so that the object will move backwards and forwards continuously. Who said perpetual motion eas impossible.

Since the object will not be dependent on someone selecting a link to start it moving we'll remove the link from the object and add a call to the mover function into the end of the start function

Here is the code in full (apart from the function libraries) with the latest changes highlighted.

var xxx = 0; var yyy = 0;
var startpos = endPos = 0;
function start() {
var w = objWidth('myobj');
xxx = (pageWidth()-w-20);
startPos = yyy = 10;
endPos = (pageHeight()-objHeight('myobj'))/2;
endPos -= (endPos-startPos) % 2;
moveit();
setObjVis('myobj','visible');
mover();
}
function moveit() {
var x = (posLeft()+xxx) + 'px';
var y = (posTop()+yyy) + 'px';
moveObjTo('myobj',x,y);
}
function mover() {
if (yyy < endPos) {
yyy +=2;}
else if (yyy > endPos) {
yyy -=2;}
else {endPos = startPos; startPos = yyy;}
moveit(); setTimeout('mover()',25);
}
window.onload = start;
window.onscroll = moveit;

Basically all we have done is to move the call to moveit() and the setTimeout from the two if statements to the end of the mover function where they will always be run. This means that once the start and end positions have been swapped that the functions will be called to start moving the object back in the opposite direction automatically. The call to mover() in the start function starts the object moving in the first place without waiting for a link to be selected.

Explore JavaScript
About.com Special Features

Holiday Central

What to eat, where to go, fun things to do and how to save money on the perfect gifts. More >

Family Tech Center

Stay connected and entertained with reviews on tips on the latest HDTVs, cellphones and more. More >

JavaScript
  1. Home
  2. Computing & Technology
  3. JavaScript

©2009 About.com, a part of The New York Times Company.

All rights reserved.