Javascript Parallax
Sunday, March 14, 2010 at 6:46AM As I decided to use this technique for the background of this blog, I thought I might make a few notes about it.
Parallax is what you call the apparent loss of speed of objects moving parallel to you as they get farther away from you. What this ultimately means for us is, using some simple Javascript, we can create the illusion of depth in the page by moving backgrounds or elements relative to the scrolling of the page or mouse location.
This principal has a wide range of graphic design applications, such as the background of this blog. The code can be simple and small, requiring only a couple of additional divs, and could with CSS3 not even require that much.
Beyond being pretty, there are a host of potential uses for parallax. In fact, scrollbars are a psudeo-parallax design idiom. Other uses might include menus that scroll past the user more slowly than the content, and 3D-esque interfaces that use mouse-pointer-location to display and hide submenus or to move the entire menu out of the way.