📖 Step 4: Design - Research & Process#102 / 291
Parallax
Parallax
📖One-line summary
An effect where the foreground and background scroll at different speeds.
✨Example
On scroll the background moves at a different speed
☁️
🌤️
Content block 1
Content block 2
Content block 3
Content block 4
⚡Vibe coding prompt examples
>_
Implement a parallax effect in pure CSS where the background image moves slower than the scroll speed.
>_
Build a parallax scroll animation with Framer Motion where multiple layers move at different speeds.
>_
Handle it responsively so parallax is disabled on mobile and only applied on desktop. Consider performance.
Try these prompts in your AI coding assistant!