What the Frontend? Open the interactive gallery →
Scroll

Parallax depth layers

Different elements move at different speeds as you scroll — creating an illusion of depth.

What you're seeing

Background moves slower than foreground, creating a sense of layers at different distances.

Where you'll see it

Hero sections, landscape illustrations, editorial layouts.

Difficulty

Low — 2/5

Libraries that build it

GSAPLenisCSS

Ready to prompt — paste this into your AI coding tool

"Apply parallax to the hero — background image moves at 0.3× scroll speed, foreground text at 1×, using GSAP ScrollTrigger with scrub"

Seen in the wild

ThorgalA 45-year comic saga becomes an explorable world — Rosinski’s art split into parallax layers you walk into, doorway by doorway.

Related Scroll effects

Scroll-scrubbed animationHorizontal scroll sectionScroll-driven pinningProgress indicatorScroll velocity skewSticky storytelling
See the animated preview in the dictionary →