Creating Parallax Scrolling Websites : Example 7

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

This example 7 is implemented using the computers 3D graphic hardware.

This example page has two text blocks and a big image. It demonstrates animations moving and rotating the text blocks. Shadows (performance and GPU permitting) and lighting automatically adapt.

Please read the Commented Source Code of this Page

Initially (without javascript) this page shows the first text block followed by the image and then the second text block. The 3D animation declars the image to appear 5000px behind the text plane and so scrolls more slowly. Therefore less space is needed for the image and the second text block is moved upwards using
'margin-top:-600px'.

In addition the first text block rotates away when scrolling down and the second text block flies in.

Next example: Example 8