This is a sample page, go back to the main article.
Parallax scrolling adds a 3D effect to websites by scrolling objects that are further away slower than objects in front. This first simple example has a background image that scrolls slower than the text.
This is implemented using the computers 3D graphic hardware. It defines the background image to be a 3D object located 1000 pixels behind the text. Also the virtual users eye position moves down while scrolling down. This automatically leads to the desired parallax scrolling effect.
Note that in this simple example the background is just an image. See our homepage for a full 3D background.
You might have noticed that the background image shown in this first example is smaller than usual. This is because the image is declared to be 1000px further away from the users eye than the text and therefore it is perspectively shrinked. See example2 to overcome this problem.