Parallax scrolling creates depth by moving background elements slower than foreground content. This guide covers multiple CSS-only techniques, from the classic perspective approach to modern scroll-driven animations.
In This Guide
1. What is Parallax Scrolling?
Parallax scrolling is a visual effect where background elements move at a different speed than foreground elements as you scroll. This creates an illusion of depth and makes the page feel more dynamic.
Good Use Cases
- • Landing page hero sections
- • Product showcases
- • Storytelling websites
- • Portfolio sites
Avoid For
- • Content-heavy articles
- • E-commerce product lists
- • Applications with forms
- • Mobile-first designs
2. Method 1: CSS Perspective Transform
The most reliable CSS-only parallax technique uses 3D transforms with perspective. Elements further from the viewer (translated on the Z-axis) appear to move slower.
How It Works
.parallax-container {
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
perspective: 1px; /* Creates 3D space */
}
.parallax-layer {
position: absolute;
inset: 0;
transform-style: preserve-3d;
}
.parallax-back {
/* Moves slower (further away) */
transform: translateZ(-1px) scale(2);
}
.parallax-front {
/* Moves at normal speed */
transform: translateZ(0);
}Key Concepts:
- perspective: 1px - Creates a 3D viewing context. Lower values = more dramatic effect.
- translateZ(-1px) - Moves the element away from the viewer, making it scroll slower.
- scale(2) - Compensates for the element appearing smaller when pushed back.
Complete Example
<div class="parallax-container">
<div class="parallax-layer parallax-back">
<img src="background.jpg" alt="" />
</div>
<div class="parallax-layer parallax-front">
<h1>Welcome</h1>
<p>Content scrolls normally</p>
</div>
</div>
<style>
.parallax-container {
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
perspective: 1px;
perspective-origin: center center;
}
.parallax-layer {
position: absolute;
inset: 0;
}
.parallax-back {
transform: translateZ(-1px) scale(2);
}
.parallax-back img {
width: 100%;
height: 100%;
object-fit: cover;
}
.parallax-front {
transform: translateZ(0);
padding: 2rem;
}
</style>3. Method 2: Scroll-Driven Animations
Browser Support: Scroll-driven animations are supported in Chrome 115+ and Edge 115+. Firefox and Safari support is coming.
The new scroll-driven animations API allows you to tie CSS animations to scroll position, enabling parallax effects without JavaScript.
Basic Scroll-Linked Animation
@keyframes parallax-move {
from {
transform: translateY(0);
}
to {
transform: translateY(-100px);
}
}
.parallax-element {
animation: parallax-move linear;
animation-timeline: scroll();
animation-range: 0% 100%;
}Multiple Layer Example
/* Different speeds for different layers */
.layer-slow {
animation: move-slow linear;
animation-timeline: scroll();
}
.layer-medium {
animation: move-medium linear;
animation-timeline: scroll();
}
.layer-fast {
animation: move-fast linear;
animation-timeline: scroll();
}
@keyframes move-slow {
to { transform: translateY(-50px); }
}
@keyframes move-medium {
to { transform: translateY(-100px); }
}
@keyframes move-fast {
to { transform: translateY(-200px); }
}4. Method 3: Background Attachment Fixed
The simplest parallax technique uses background-attachment: fixed. The background stays stationary while content scrolls over it.
Simple Fixed Background
.parallax-section {
min-height: 100vh;
background-image: url('background.jpg');
background-attachment: fixed;
background-position: center;
background-size: cover;
}Important Limitations:
- • Does not work on iOS Safari - falls back to scroll
- • Can cause performance issues with large images
- • Only works with background images, not elements
- • Less flexible than perspective method
5. Performance Considerations
Do
- • Use
transformandopacityfor animations (GPU accelerated) - • Add
will-change: transformto animated elements - • Optimize images (compress, use WebP, lazy load)
- • Test on low-end devices
- • Use
contain: paintto isolate repaints
Don't
- • Animate
top,left,width,height - • Use too many parallax layers (3-4 max)
- • Apply parallax to large areas on mobile
- • Forget to test actual scroll performance
Performance Testing:
/* Force GPU acceleration */
.parallax-layer {
transform: translateZ(0);
will-change: transform;
backface-visibility: hidden;
}6. Accessibility
Parallax effects can cause problems for users with vestibular disorders (motion sensitivity). Always provide a way to reduce motion.
Respect prefers-reduced-motion
/* Default: parallax enabled */
.parallax-layer {
transform: translateZ(-1px) scale(2);
}
/* Disable for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
.parallax-layer {
transform: none;
}
.parallax-container {
perspective: none;
}
/* Remove any scroll-driven animations */
.parallax-element {
animation: none;
}
}Accessibility Checklist:
- • Always include prefers-reduced-motion support
- • Ensure content is readable without parallax
- • Don't make important content depend on the effect
- • Avoid fast or jarring movements
- • Consider providing a toggle in site settings
Summary
Perspective Transform: Most reliable cross-browser method. Use for multi-layer parallax.
Scroll-Driven Animations: Modern, powerful, but limited browser support. Great for Chrome-focused projects.
Background Attachment: Simplest option, but doesn't work on iOS and has performance issues.
Always prioritize performance and accessibility over visual effects.