Privacy | Datenschutzerklärung | Impressum | Privacy

Creating Parallax Scrolling Websites : Example 3

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

This third example demonstrates scrolling of more than one element.

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

This text block is 1000 px behind the normal text.
This text block is 2500 px behind the normal text.
This text block is 4000 px behind the normal text.
This text block is 1000 px behind the normal text not resized.
This text block is 2500 px behind the normal text not resized.
This text block is 4000 px behind the normal text not resized.

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.

This example scrolls various text boxes, which are located at various distances behind the normal text plane. Consequently the elements shrink and scroll more slowly. On some of the elements shrinking is disabled. See example 4 for scrolling elements that are in front of the normal text plane.