Pure CSS Parallax Websites

The article explains how to build a parallax scrolling site with CSS alone. It argues that moving the effect out of JavaScript avoids the reflows, paints, and frame drops caused by scroll handlers, while letting the browser handle more of the work through hardware acceleration.

Reading notes

#

• The effect uses a container with perspective and overflow-y: auto so scrolling happens inside the element while descendants are rendered against a fixed 3D viewpoint.
• Layers are taken out of normal flow and assigned different translateZ() values to control scrolling speed.
• Because Z translation changes apparent size, the article adds scale() to correct the depth effect and keep layers at their original size.
• The amount of parallax depends on both perspective and the Z distance; more negative values scroll more slowly.
• For multi-section layouts, the article groups layers inside parallax__group elements with transform-style: preserve-3d and height: 100vh.
• Groups should not be clipped with overflow: hidden, because that breaks the effect.
• Debugging is easier when transforms are applied directly to the groups to make the 3D structure visible.
• Firefox, Safari, Opera, and Chrome support the effect, while IE does not support preserve-3d yet.
• The content should still work without parallax, following progressive enhancement.