Creating Parallax Scrolling Websites : Example 2

This is a sample page, go back to the main article.

This second example also has a background image that scrolls slower than the text. In contrast to the first example perpective shrinking of the image is compensated for.

This example 2 is implemented using the computers 3D graphic hardware. It defines the background image to be a 3D object located 5000 pixels behind the text. The image is enlarged in order to compensate for the perpective shrinking. Also the virtual users eye position moves down while scrolling down. This automatically leads to the desired parallax scrolling effect.

Please read the Commented Source Code of this Page

Note that in this simple example the background is just an image. See our homepage for a full 3D background.

Find a more advanced example scrolling various elements at example3.