What is parallax scrolling? Parallax scrolling is a visual effect technique that tries to achieve a sense of depth by moving the elements of a scene, which have different speeds, for them to respond to a user action, such as the scrolling of a web page. This technique has been widely used in the 2D video game industry since the eighties.
In this chapter, we'll discover how to enhance our websites with parallax scrolling and other cool effects that respond to page scrolling. To achieve this, we'll dig into some advanced—and sometimes experimental—CSS 3D techniques and learn how to deal with perspective effectively.
Due to some implementation differences, we will then focus on how to obtain similar effects on different layout engines, such as WebKit and Gecko.
If you are working on a Windows operating system and using Chrome, you might have to switch to Firefox (or IE10) if the CSS 3D results are not as expected due to an absent or unsupported GPU. To check this...