Creating Parallax Scrolling Websites : Example 5

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

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

Various 3D objects are displayed in front and behind the normal text plane. Also the virtual users eye position moves down while scrolling down. This automatically leads to the desired parallax scrolling effect.

This results in a parallax 3D effect, since 3D objects located closer to the users eye scroll faster than 3D objects further away.

The three spheres on the right have been resized to take exacly the same screen space. This means that the spheres closer to the user are smaller in the 3D world than the spheres further away.

Please read the Commented Source Code of this Page

3D objects can be placed on HTML pages using an appropiate 3D library, e.g. taccgl™. You need a 3D model created with a 3D modelling program, put the model files on your web server and give the file url to the library.

In addition you need to put a placeholder HTML element on the page, which marks the position where the 3D object will be placed.

Next example: Example 6