Back to Motion Prompt examples
Landing page & web effects, part 2 · #04
Background color change on scroll
The page background changes color by section. Each time the scroll moves into a new section, the whole page background blends from cream to navy to light blue; on the dark background the text turns white.
Scroll effectsbackground-colorscrollsectioncolor-transitionscroll-drivenstorytelling
Full motion specification
How the movement works
Use it on story-style pages where each chapter has its own mood, or to contrast scenes such as day and night or the seasons.
- 01A 511 × 168 viewport with three sections, each 168 px (one screen). Scroll: 0→168 px over 0.3–1.2 s, 168→336 over 1.8–2.7 s, 336→0 over 3.3–4.4 s (cubic ease-in-out). One pass takes 4.7 s (twice per 9.4 s pack cycle).
- 02Background colors: morning #FFEBD9 → night #1E2A4A → holiday #DDE6FF, painted as one color behind the whole page and blended while crossing a section boundary.
- 03Blend: 0→1 between 5% and 95% of the scroll to the next section (quadratic ease-in-out), driven by scroll position, not by time.
- 04Toward night the headline blends from navy to white and the body bars from beige to blue-gray; the section labels (01 MORNING …) stay orange.
- 05Each section's picture (sun, moon and stars, mountain photo) moves with the page. The scrollbar thumb follows the scroll.
Prompt
Add a background color change on scroll: blend smoothly from cream for the morning section to navy for night and light blue for the holiday section.