Parallax
Definition
A scrolling effect where background images move slower than foreground content, creating a sense of depth.
What is Parallax?
Parallax scrolling is a visual effect where different layers of content move at different speeds as users scroll. Typically, background images move slower than foreground content, creating an illusion of depth and dimension.
The effect mimics how objects at different distances appear to move at different rates when you're in motion—like how nearby trees seem to rush past while distant mountains barely move.
Types of Parallax Effects
Background Parallax
Fixed or slow-moving background images behind scrolling content. The most common type.
Layered Parallax
Multiple layers moving at different speeds, creating complex depth effects.
Scroll-Triggered Animation
Elements animate as they enter the viewport, sometimes grouped with parallax effects.
Pros and Cons
| Benefits | Drawbacks |
|---|---|
| Creates visual interest | Can cause performance issues |
| Adds perceived depth | Problematic on mobile devices |
| Memorable experience | Some users find it disorienting |
| Differentiation | Can feel dated or overused |
Performance Concerns
Parallax effects require JavaScript and can cause:
- Jerky scrolling on slower devices
- High CPU usage
- Battery drain on mobile
- Poor experiences on older browsers
When to Use Parallax
- Landing pages where impression matters
- Portfolio sites showcasing creativity
- Storytelling pages with linear narratives
When to Skip It
- Content-focused sites (blogs, documentation)
- Ecommerce where speed is critical
- Mobile-first experiences
- Sites prioritising accessibility
If you use parallax, keep it subtle and test thoroughly on real devices.