Create Parallax Scrolling Web Sites with 3D Hardware Acceleration and WebGL™

Parallax scrolling adds a 3D effect to websites by scrolling objects that are further away slower than objects in front. This mimics a well-known optical effect: When looking out of a travelling car, objects further away appear to move slowly while objects nearby move fast. (See simple example 2 and example 4 and full size taccgl.org home page. )

Most parallax scrolling web sites are implemented using javaScript and CSS, although most computers have full scale 3D hardware graphic acceleration. This article describes, how to build parallax scrolling websites with full 3D hardware acceleration (WebGL™).

This not only shows the parallax effect perspecivly correct but also enables many other 3D effects, like rotating (example 7), 3D objects (example 5), simulating of light sources, or shadows (example 4).

Often the term "parallax scrolling" is generalized to arbitrary animations playing while scrolling, e.g. example 8 and example 9.

Basic Idea and first Example

Key idea is to see a web page as 3 dimensional scene wherein the background is behind the normal text, further away from the user's eye than the text. In the Example 1 we do so by drawing the background image with 3D support (WebGL™) 1000 pixels behind the text plane. The idea is that this automatically makes the background scroll more slowly than the text.

We add the following HTML code

which adds a background image with id="bgImg" and (after including the taccgl™ library) javaScript code to the onload routine of the page

which tells the 3D engine to show the background image with id="bgImg" 1000 pixels behind the normal text plane.

Scrolling Eye Position

The second key ingredients is to tell the 3D graphic to move the virtual user's eye when scrolling the page, which is the virtual equivalent to the moving car:

Here parameters say that the eye position moves in X direction just as the scrolling while it move 3 times as fast in Y direction. (Note that 3 is a rather high value useful for this first example, further examples use factors much closer to 1).

Please feel free to have a look at the commented source code of Example 1.

Compensating Perspective Moving

Perspective mapping moves an element that is virtually behind the text plane from its normal position. The posZ method used above automatically compensates that movement. In order to do so, it needs to know the eye position, which we pass using the {t0:0} parameter.

(As we have seen above with parallax scrolling the eye position is not static but moving while scrolling. So we need to pick a specific scroll position. The {t0:0} parameter specifies the scroll position where the page has been scrolled upwards so far that the background image hits the top of the window. When the page is scrolled to that position, the parallax scrolling background image appears at the position specified by HTML/CSS. Before and after that scroll position the image has a different position, which should be clear since it scrolls more slowly than the rest of the page.)

Compensating Perspective Shrinking

By declaring the background image 1000 pixels behind the text plane, the 3D engine will automatically shrink the background image as appropriate for an object that is further away.

This shrinking may or may not be useful, in our example it is not. To avoid shrinking the background image is previously resized to compensate for the shrinking.

In Example 2 we use the following code

Now since there is no shrinking a distance of 5000 pixels (posZ(5000)) and a eye point that moves more slowly (parallax(1,1)) looks better.

Example 3 shows some more elements using various distance and consequently scrolling at different speeds. Some compensate for the shrinking while others do not.

Shadows

In Example 3 you might have noticed, that the 3D engine automatically shows shadows casted from the scrolled elements on the background image. Shadows are useful to intensify the 3D experience. They can of course be disabled if desired.

Not all 3D engines have enough performance to show shadows, so it is possible that you cannot see shadows on a slow device.

The 3D engine simulates a virtual light source. It calculates, if there is an object between the light source and a given pixel. If so, the pixel is shown darker to display the shadow. This all takes place automatically, only the position of the light source needs to be specified. Per default it is 5000 pixels in front of the text and 200 pixels left and above the top left of the text. In the examples we use

to move the light source down while scrolling. The factor of 1.2 in y-direction makes the light source move a bit faster than the eye position and so the shadows move during scrolling.

Example 4 shows an additional element in front of the text that, depending on scroll position casts a shadow partly on the text and partly on the background.

3D Hardware Acceleration, Shading, and 3D Objects

3D engines as contained in current GPUs provide many more 3D features such as depth buffering and shading. Depth buffering correctly displays surfaces hidden (even partially) behind other objects or elements. In contrast to classical implementations of parallax scrolling this allows for arbitrarily rotated elements.

Shading calculates the lighting of each pixel of each element and can so more realistically display rotated elements and curved surfaces, since in reality pixels directly facing a light source appear brighter than pixels rotated away.

All together these features make it possible to show 3D objects and scenes that were previously designed with a 3D modelling program. These objects can so be integrated in a web page and via parallax scrolling viewn from different angles, see Example 5.

Scrollable Animations

Sometimes the term "Parallax-Scrolling" is used for arbitrary animations playing while scrolling down. Hereby a classical animation uses instead of the usual time parameter the scroll position.

In fact all taccgl™ transitions, which normally play from a given startTime for a given duration (see First Example for the normal operation) can also programmed to play from a given scroll position (startScroll) for a given scroll distance.

Example 6 uses code similar to the following example to fade out a text block while scrolling down.

Example 7 performs a rotation animation instead. Example 8 shows animations splitting HTML elements into parts and example 9 animations bending and morphing HTML elements.

Conclusion

The article described the advantages of implementing parallax scrolling web sites using hardware 3D acceleration via WebGL™ using the taccgl™ library.

To see some more elaborate examples we refer to the taccgl™ Home Page. In order to get a complete understanding of the examples shown in here, see the taccgl™ Tutorial and then the taccgl™ Manual.

WebGL™ is a trademark of the Khronos Group Inc.