Parallax Snippets — Free HTML CSS JS Parallax Scroll Effect Examples

Parallax works because layers moving at different speeds read as different distances. The technique is easy to do badly — hijacked scrolling, laggy transforms, motion so heavy it makes people queasy — so these snippets keep it restrained and cheap: transform-only movement, small offsets, and a hard stop when the user prefers reduced motion.

The tag covers scroll-linked layer drift, hero backgrounds that move slower than their foreground, pointer-driven depth on cards and heroes, and the CSS-only perspective approach that needs no script at all.

Why different speeds read as depth

In the real world, closer objects appear to move faster across your field of view than distant ones as you move past them — the same cue your eyes use to judge distance while looking out a car window. Giving a background layer a smaller scroll-speed factor than the foreground content reproduces that cue artificially, which is the entire mechanism behind every parallax effect regardless of how it is implemented.

Doing it off the main thread

The naive approach — read scroll position in a scroll event handler, set a style property directly — forces layout work on the main thread on every scroll frame. These snippets instead write only transform values, and do so inside a requestAnimationFrame callback rather than directly in the scroll handler, which keeps the actual work on the compositor and prevents scroll-linked motion from ever competing with the page's own responsiveness.

The CSS-only approach, with no script at all

Giving a scrolling container its own perspective, then pushing background layers back along the z-axis with translateZ and scaling them up to compensate for the resulting shrink, produces genuine parallax purely through how the browser renders 3D transforms during a normal scroll — no JavaScript computes anything. It is the smoothest version of the effect available, in exchange for a more specific HTML structure than the scripted approach requires.

Restraint is the actual craft

Large parallax offsets and any horizontal drift are what trigger motion discomfort in sensitive users, which is why every snippet here keeps layer displacement small relative to the scroll distance involved. Under prefers-reduced-motion, the correct response is disabling the effect entirely rather than merely slowing it down — a slower version of a nauseating effect is still a nauseating effect for the people the preference exists to protect.