Back to Motion Prompt examples
Landing page & web effects, part 2 · #08
Zoom on scroll
An image grows to fill the screen as you scroll. As the page scrolls, a small photo in the middle grows to fill the window, the text around it fades away and a headline appears over the photo.
Scroll effectszoomscrollimagescalescroll-drivenherofullscreen
Full motion specification
How the movement works
Use it on travel, real-estate or brand sites to pull the visitor into the photo.
- 01A 511 × 168 viewport. Scroll progress p: 0→1 over 0.3–2.3 s, 1→0 over 3.0–4.4 s (cubic ease-in-out). One pass takes 4.7 s (twice per 9.4 s pack cycle).
- 02Photo frame: from 155 × 90 in the middle (x = 178, y = 58, radius 8) to the full 511 × 168 window (radius 0); position, width, height and radius change in proportion to p.
- 03The heading and text around it fade out while p goes 0→0.45 (opacity 1 − 2.2p).
- 04While p goes 0.7→1, a white headline (26 px, 2 px letter spacing) fades in at the center of the photo. The scrollbar thumb follows the scroll.
Prompt
Use zoom on scroll for the hero image: grow the small centered photo to fill the viewport as the user scrolls, then fade a headline in over it.