Xah Lee, 2006-01

Scroll the page down and you'll see a block that follows you in towards the center of the page as you scroll the page.

Here we show how to have a block that moves to the center of page thru animation, so that whenever the user scrolled the page, the block slides into the desired position.

The essential technology that makes this work is by writing a JavaScript function that changes the position of the CSS block. Each time moving the block closer to the desired position. Then, this function is called in a periodic loop.

This script works in latest version of Safari, iCab, FireFox, Opera on the Mac as of 2006-01. It does not work in Mac IE, and may not work in Windows IE. For Microsoft IE it may need to be tweaked, but the principle is the same. View Source to see the code.

Once upon a time...

~FIN~

References:

• window.pageYOffset http://www.mozilla.org/docs/dom/domref/dom_window_ref81.html
• http://msdn.microsoft.com/workshop/author/dhtml/reference/methods/settimeout.asp

Page created: 2005-08.
© 2005 by Xah Lee.