A landscape at depth.

How this works?

The scene above is a single fixed-height container with six absolutely-positioned layers stacked from back (sky) to front (grass). As the page scrolls, GSAP moves each layer vertically by a different multiplier — distant objects drift slowly, foreground objects fly past. The result reads as depth.

The mountains and trees are inline SVG, so they're sharp at any resolution and weigh almost nothing. The moon is a radial gradient. No image files.

The parallax rates

• sky — fixed (doesn't move)
• moon — drifts slowly down (rate 0.15)
• mountains-far — slow (rate 0.25)
• mountains-mid — medium (rate 0.5)
• hills — faster (rate 0.7)
• trees — fastest (rate 0.9, almost 1:1 with scroll)
• ground — locked to the bottom

Tip: the "right" rates are the ones that look good. Tweak them in src/main.ts until the layers feel like they have weight.

← back to wow.widev.pro