Parallax Storytelling
Also called: Scrollytelling, Parallax scrolling, Narrative scroll
A story told by scrolling: full-bleed layered scenes drift at different speeds while the page unfolds in numbered chapters.
Design keywords
Say these words to ask for this style.
Parallax Storytelling turns a page into a journey. A dusk sky stays fixed, mountain ridges in three tones slide at different speeds as you scroll, and the next chapter rises over the last. Content is organised as numbered chapters with a big serif headline, short paragraphs and wide scene panels whose inner layers shift independently. Ridgelines become section dividers, numbers are set like captions, and the palette moves from night blue to sunset amber. Built with CSS scroll-driven animations and a fixed backdrop, it degrades to a still, layered illustration.
Best for
- Destination, tour and hotel storytelling pages
- Annual reports, campaigns and long-form features
- Product origin stories and brand manifestos
- Museum, heritage and nature-park sites
Avoid for
- Task-focused apps and dashboards people use daily
- Search-heavy catalogues
- Users with vestibular disorders unless reduced motion removes the movement
✓ Do
- Use 3–4 layers moving at clearly different rates (e.g. 0.2×, 0.5×, 1×)
- Give every chapter a number, one headline and one idea
- Ship a still, layered illustration under prefers-reduced-motion
✕ Don't
- Don’t scroll-jack or snap the user away from where they scrolled
- Don’t put body text on a moving layer
- Don’t make the hero taller than ~100vh before the story starts
Not to be confused with
On mobile
Keep one layered scene per screen (onboarding, featured card) and shift its layers with a gentle 10–20px tilt or scroll offset; drop scroll-linked parallax on long lists and low-end phones, and keep text on solid panels.
Prompt builder
Paste into Claude, Cursor, v0, Lovable or any coding agent to recreate this style.