Back to Motion Prompt examples
Landing page & web effects · #01
Parallax scrolling
On scroll, background layers move slower than the content. As the page scrolls down, the headline moves up normally while the sky and sun, far hills and near hills move more slowly.
Scroll effectsparallaxparallax-scrollingscrolldepthlayersherobackground
Full motion specification
How the movement works
Use it to give the hero or a section photo a sense of depth.
- 01A browser window with a 511 × 168 viewport. Scroll: 0→120 px at 0.3–1.9 s, 120→0 at 2.9–4.3 s (cubic ease-in-out).
- 02Each layer moves by scroll × factor: sky and sun 0.15, far hills 0.4, near hills 0.7.
- 03Headline (28 px), button and the next section move at 1.0 (normal scrolling).
- 04The next section (white) starts at the bottom of the hero (168 px) and slides over the slower background.
- 05The scrollbar thumb on the right moves with the scroll.
Prompt
Make the hero background a parallax scroll: move it at 0.3× the scroll distance.