Privacy | Datenschutzerklärung | Impressum | Privacy

Creating Parallax Scrolling Websites : Example 4 - Shadows

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

This fourth example shows shadows and elements scrolling in front of the text.

This example 4 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.
Text block scrolling 2500px in front.
Text block scrolling 2000px in front.

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.

Have a special look at the shadows that are created without much programming by the 3D engine. The position of the virtual light source moves down while scrolling. It travels a bit faster than the eye point and so the shadows move while scrolling.

Next example: Example 5