O'Reilly logo

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

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required