Back to Dictionary
Page & View Transitions
●●●Requires Setup
Parallax Scroll
Background elements move at a different speed than foreground elements while scrolling, creating an illusion of 3D depth and immersion.
Live Demo
What It Is
Background elements move at a different speed than foreground elements while scrolling, creating an illusion of 3D depth and immersion.
✓When to Use
- Marketing landing pages
- Editorial feature stories
- Hero sections with rich photography
✕When NOT to Use
- Data-heavy dashboards
- If it causes text readability issues
Configuration Tips
- 01Keep the speed difference subtle (e.g., background moves 20-30% slower than foreground)
- 02Use hardware-accelerated transforms (translate3D) rather than background-position
You've Seen It In
AppleStripeNike
Prompt Templates
Copy and paste these prompts into your AI coding assistant.
Add a parallax scrolling effect to my hero image, so it moves slower than the rest of the page.
Code Example (Tailwind CSS)
export function ParallaxScrollDemo() {}