← All elements
<div class="px"><div class="l back"></div><div class="l mid"></div><div class="l top"><h3>Scroll me</h3></div><div class="pad">Keep scrolling</div></div>About this layout
Layers that move at different speeds as you scroll, achieved with perspective and translateZ on a scrolling container.
How it works
The scrolling box sets a small perspective value. Its layers are pushed back in 3D with translateZ, and each is scaled up to compensate for looking smaller. Layers that are further away appear to move more slowly when you scroll, which gives the depth of a parallax scene without any script.
Ways to customise it
- Change the translateZ and scale pairs to alter the depth difference.
- Edit the gradients of the back layers.
- Add more content after the layers to extend the scroll.
Good to know
It relies on perspective on a scrolling container, which works in current browsers, but Safari can behave differently. Keep important content on the flat layer.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.