move
Web Page Animation7. Making it Move |
|
Join the DiscussionWhen most people think of animation they think of objects moving around your web page. We have looked at making objects appear and disappear first so that you can make sure that the object only appears when and where you want it to but now it's time to get started on really animating the object on the page by making it move. Of course the object is already moving when we scroll the page but now we are going to get it to move independently. In this tutorial we will add a link to our object that will make the object move a set distance to the left of its original position. We'll simplify things a bit by dropping the hide and redisplay effects and go back to having the object display in the top right corner of the window. The first thing we need to do is to add a link into the object that can be clicked to move the object.
<div id="myobj">
This is a web page object.<br /><a href="#" onclick="mover();return false;" >move</a></div> Next we need to produce the code to place the object on the screen at the start and then add the function to it that will actually move the object.
var xxx = 0; var yyy = 0;
var endPos = 0; function start() { var w = objWidth('myobj'); xxx = (pageWidth()-w-20); yyy = 10; endPos = xxx - 100; moveit(); setObjVis('myobj','visible'); } function moveit() { var x = (posLeft()+xxx) + 'px'; var y = (posTop()+yyy) + 'px'; moveObjTo('myobj',x,y); } function mover() { if (xxx > endPos) { xxx -=2; moveit(); setTimeout('mover()',50);} } window.onload = start; window.onscroll = moveit; We have set an end position for our move that is 100 pixels to the left of the start position (xxx - 100). When the move link is selected the mover() function is called. This tests the current position (xxx) against the end position (endPos) and if it still has a distance to go it subtracts 2 from the current position and calls our existing moveit() function (that we use have been using with the scroll function) to redisplay the object 2 pixels to the left of its previous position. The setTimeout function will then run the mover function again 1/20th of a second later which will again move the object 2 pixels to the left and so on until the object is no longer to the right of its end position. At that point the mover function will no longer have an action to perform and the object will stop moving. Note that if we scroll the page while the object is moving then the two movement effects should both be taken into account and the object will continue to move left relative to the browser window. Also if the browser window is narrower than the 100 pixels that we have specified that we are going to move the object by that the object will move as far as necessary off of the left of the window without any problems. With the distance to be moved, the time delay between individual movements, and the distance moved in each time period it will take 2.5 seconds to move the 100 pixels in 50 jumps of 2 pixels each. This should give the appearance of constant movement. |
