Learning CSS3 Animations and Transitions: A Hands-on Guide to Animating in CSS3 with Transforms, Transitions, Keyframes, and JavaScript

5. Creating 3D Effects with Parallax Scrolling

Combining keyframe animations and transforms with parallax scrolling enables you to create rich, engaging content that has a 3D feel without actually doing any 3D manipulation. This chapter walks you through creating an immersive page with a sense of depth in a 2D space.

Introduction to Parallax Scrolling

Parallax scrolling is a technique in which background images move by the camera—or the person viewing the webpage—more slowly than foreground images. By creating a page that has multiple layers and then animating each layer to move across the screen at different speeds, you can create the illusion of depth.

A typical parallax scrolling effect has the background moving at the slowest speed, a midground ...