What is Parallax Scrolling in Web Design?

Scroll down a page and watch the background drift slower than the content in front of it. That gap in speed is the whole trick.

Parallax scrolling is a web design technique where background layers move at a different speed than foreground elements during scroll, creating a perception of depth on a flat screen.

It shows up on Apple product pages, Spotify Wrapped, and portfolio sites worldwide. Used well, it holds attention and guides users through content. Used poorly, it tanks page speed and breaks on mobile.

This article covers how parallax scrolling works technically, the different types, where it fits, and how to implement it without hurting your Core Web Vitals or accessibility scores.

What is Parallax Scrolling?

Parallax scrolling is a web design technique where background layers move at a slower speed than foreground content as a user scrolls down a page. The difference in scroll rate between layers produces a perception of depth on a flat screen.

The effect comes from physics: objects closer to a viewer appear to move faster than objects farther away. Browsers recreate this through CSS transforms or JavaScript scroll event handlers that adjust each layer’s position relative to the scroll offset.

The technique predates the web. It appeared in 2D arcade games like Moon Patrol (1982), where foreground terrain scrolled faster than background mountains to fake a 3D environment. Web designers adopted the same principle once browsers gained reliable support for scroll position tracking and GPU-accelerated transforms.

Bubble’s Senior Product Designer Rhys Thomas put it plainly in late 2024: parallax scrolling “typically strikes a good balance between adding motion but not harming the UX” when implemented with restraint.

How Does Parallax Scrolling Work Technically?

Parallax scrolling works by assigning different scroll velocity values to stacked page layers. As the browser registers a scroll event, each layer recalculates its position using a depth multiplier applied to the current scroll offset.

CSS methods consume 40-60% less CPU than JavaScript-based alternatives, according to implementation benchmarks, because CSS transforms run on the compositor thread rather than the main thread (wpdean.com).

CSS-Only Parallax Implementation

The simplest CSS approach uses background-attachment: fixed, which locks a background image while page content scrolls over it. A more reliable method uses transform: translateZ() inside a 3D perspective context.

Key CSS properties for parallax:

• perspective set on the scroll container establishes the 3D rendering context
• transform: translateZ() on child elements sets their virtual depth
• transform: scale() corrects the size distortion that Z-axis movement creates
• will-change: transform signals to the browser to allocate a compositor layer in advance

iOS Safari disables background-attachment: fixed entirely on mobile. Transform-based CSS parallax works across all modern browsers including Safari, making it the more reliable CSS path.

JavaScript-Driven Parallax Implementation

JavaScript reads window.scrollY on each scroll event and applies a calculated transform: translateY() value to target elements. The depth formula is: finalPosition = scrollOffset * depthFactor, where depthFactor ranges from 0.1 (far background) to 5.0 (close foreground).

Running this calculation inside a raw scroll listener blocks the main thread and causes scroll jank. Wrapping updates in requestAnimationFrame syncs recalculations to the browser’s 60fps render cycle.

Three widely-used libraries handle the mechanics automatically:

• Rellax.js (v1.12.1, 2.1KB minified): data-attribute configuration, no dependencies
• GSAP ScrollTrigger: scene-based control with precise animation timing
• ScrollMagic: event-driven scroll sequences, useful for multi-step storytelling layouts

GPU Compositing and the Compositor Thread

The browser rendering pipeline has two key threads: the main thread and the compositor thread. Main-thread work includes layout, paint, and JavaScript execution. Compositor-thread work includes CSS transforms and opacity changes.

Parallax that stays on the compositor thread maintains smooth 60fps. Parallax that triggers layout recalculation on the main thread causes dropped frames, visible as stutter during scroll.

FPS measurements in Chrome DevTools show JavaScript-heavy parallax on mid-range devices commonly runs at 30-45fps instead of the target 60fps (wpdean.com). Using transform: translateY() instead of top or margin keeps animation off the main thread and avoids this issue.

What Are the Different Types of Parallax Scrolling?

Parallax scrolling covers 5 distinct techniques. Each one targets a different interaction model and serves different design goals.

Vertical Parallax

The most common form. Background layers slide upward more slowly than foreground content as users scroll down. Practically every parallax implementation starts here.

It works well for hero image sections where a large background photo moves at roughly half the scroll speed of the text overlay sitting in front of it. The result is a sense of spatial separation between content layers without any 3D rendering engine.

Mouse-Driven Parallax

Instead of scroll position, this variant reads cursor coordinates via a mousemove event listener. Elements shift subtly as the cursor moves, creating a depth response tied to pointer location rather than scroll depth.

Parallax.js (v3.1.0) adds gyroscope support on top of mouse tracking, so the same effect responds to device tilt on mobile. That said, this is one area where battery drain becomes a real consideration on lower-end devices.

Layer-Based Parallax

Layer-based parallax stacks 3 or more independent elements, each assigned its own scroll speed multiplier. The Firewatch game website is the most-cited example of this done well: it uses 5 distinct foreground and background layers to simulate actual landscape depth.

GPU memory allocation for a 5-layer setup runs approximately 25-40MB depending on viewport size and image resolution (wpdean.com). That cost matters, especially on mobile devices with less available GPU memory.

What is Parallax Scrolling Used For?

Parallax scrolling is used primarily to hold user attention during scroll and to create a more immersive visual path through page content. It serves specific functions across several types of sites.

Brand Storytelling and Product Pages

Apple’s iPhone product pages are probably the most-seen example of parallax in commercial use. As users scroll, hardware features are revealed through layered depth transitions rather than static bullet lists. The scroll itself becomes the narrative pacing mechanism.

Spotify’s annual Wrapped campaign pages use scroll-driven depth animations to guide users through their listening data. The scroll animation adds an emotional dimension to what would otherwise be a flat statistics display.

Call-to-action placement at 60-75% scroll depth on parallax landing pages performs better than placement at the top, because users who scroll that far have already invested time and attention (wpdean.com).

Portfolio and Agency Sites

Creative studios and frontend agencies use parallax to let their work speak before a user reads a single word. Portfolio sections with layer-based scroll depth can demonstrate craft in the design itself, not just in the case studies it contains.

This approach works specifically because agency clients are often evaluating design skill directly from the site experience. A flat, static portfolio says less than a site with controlled, well-executed scroll animations.

Editorial and Long-Form Content

The New York Times and BBC have both used scroll-driven parallax for long-form journalism. Rather than breaking content into separate pages, parallax sections use the vertical scroll as a reading timeline where visual elements reinforce the text narrative as the reader progresses.

Purdue University research found participants rated parallax design sites superior in enjoyment and visual appeal compared to static equivalents, with higher reported engagement and total time spent on-site.

What Are the UX Benefits of Parallax Scrolling?

Parallax scrolling produces measurable UX gains when applied to the right content types. The benefits are tied to how the technique interacts with visual perception and user behavior during scroll.

Increased Time on Page and Scroll Depth

A Penn State study (Wang and Sundar, 2018) using a 295-participant experiment found that parallax scrolling drives user engagement through two distinct routes: a cue route involving perceived vividness and coolness, and an action route involving perceived ease of use and natural mapping. Both routes connected to positive attitudes toward the product and site.

Parallax product pages average 2:47 time on page versus 1:32 for static layouts in tracked e-commerce data (wpdean.com). That difference directly affects how much of the page content users actually see.

Visual Hierarchy Without Extra Content

Standard pages rely on size, color, and spacing to direct attention. Parallax adds a fourth tool: depth velocity. Elements that move faster visually feel closer, which draws the eye to them before slower-moving background elements.

This matters most in sections where the page needs to communicate a sequence without using numbered steps or headers. The scroll itself replaces explicit visual hierarchy signals.

Scroll Depth and Conversion Correlation

Scroll depth above 80% correlates with 2.3x higher add-to-cart rates on tracked e-commerce pages (wpdean.com). Parallax encourages users to scroll further by making the act of scrolling feel interactive rather than passive.

A/B test data from 847 e-commerce sites shows parallax improves micro-conversions like email signups and wishlist adds by 9-14%, though checkout completion drops 3-7% when implementation causes slow load times (wpdean.com). The performance side of this equation matters as much as the engagement side.

What Are the Performance and Accessibility Drawbacks of Parallax Scrolling?

Parallax scrolling has real costs. The same properties that make it engaging can break performance metrics and exclude users with motion sensitivity if not handled deliberately.

Core Web Vitals Impact

Google’s Core Web Vitals use 3 metrics to assess page experience: LCP (Largest Contentful Paint, target under 2.5s), INP (Interaction to Next Paint, target under 200ms, replaced FID in March 2024), and CLS (Cumulative Layout Shift, target under 0.1).

Parallax affects all three:

• LCP: Large, unoptimized background images common to parallax hero sections delay paint of the largest content element
• INP: JavaScript scroll handlers that run on the main thread increase response latency during active scrolling
• CLS: Parallax elements that load asynchronously and shift the layout as they appear spike cumulative layout shift scores

Unoptimized parallax triggers 15-30 repaints per second during active scrolling (wpdean.com). Google data shows bounce probability increases 32% when load time goes from 1 to 3 seconds, and 53% of mobile users leave pages that take longer than 3 seconds to load (Google/SOASTA).

One documented case: a product site’s 2024 launch used full-screen video backgrounds and aggressive scroll-jacking. LCP exceeded 8 seconds. Cart abandonment on affected pages hit 70%. They rolled back to a controlled hero-only parallax implementation (Digital Kulture, 2025).

Accessibility Requirements for Motion

Users with vestibular disorders can experience dizziness, nausea, and disorientation from continuous motion effects. This is not a minor edge case.

WCAG 2.2 Section 2.3.3 (Animation from Interactions) directly addresses scroll-triggered motion. The CSS prefers-reduced-motion media query reads the user’s operating system motion preference and disables or simplifies animations accordingly.

An Oslo Metropolitan University usability study (Murano and Pandey, 2025) confirmed that while users preferred the visual appeal of parallax sites, task completion was faster on non-parallax versions. WCAG 2.2 guidance states that in most cases parallax scrolling should be avoided, or users must have a clear way to switch it off.

Implementation is straightforward:

 @media (prefers-reduced-motion: reduce) { .parallax-layer { transform: none !important; animation: none !important; } } 

Skipping this is one of the most common oversights on sites that implement parallax scrolling. The web accessibility cost is too high to ignore.

How Does Parallax Scrolling Affect SEO?

Parallax scrolling does not directly affect search rankings. Its indirect effects on Core Web Vitals, crawlability, and content structure are where the SEO impact actually lives.

Single-Page Parallax and Crawlability

Single-page parallax sites put all content on one URL. This eliminates internal linking opportunities, reduces the total crawlable page count, and forces every piece of content to compete for attention under a single canonical address.

Googlebot renders JavaScript-based parallax but operates under timeout limits. If scroll-dependent content takes too long to render or loads only after significant user interaction, Googlebot may not index it at all (wpdean.com).

Multi-page sites that use parallax only within specific sections avoid most of these problems. The parallax effect becomes a section-level design decision rather than an architectural one.

Page Speed as an Indirect Ranking Factor

Page speed feeds directly into Core Web Vitals, which Google confirmed as a ranking signal. The connection is not symbolic.

Sites exceeding 4-second load times face ranking penalties regardless of visual design quality (wpdean.com). For parallax sites, the risk comes from heavy background images, synchronous JavaScript execution, and render-blocking scripts.

Practical speed risks specific to parallax implementations:

• Multiple high-resolution background layers increase total page weight significantly
• JavaScript libraries loaded synchronously block HTML parsing before the page renders
• GPU memory consumption for 5-layer parallax averages 25-40MB per viewport, which taxes mobile devices

CSS-only parallax avoids most of these SEO-adjacent performance risks. CSS parallax implementations consume 40-60% less CPU than JavaScript equivalents (wpdean.com) and introduce no additional render-blocking behavior when written correctly.

Content Indexing in Parallax Sections

Content embedded inside complex parallax elements can become difficult for search engine crawlers to index. If essential text lives inside a JavaScript-rendered layer with no static HTML fallback, there is a real risk that Googlebot sees empty containers rather than content (InstaWP, 2025).

The fix is straightforward: ensure all indexable text content exists in static HTML. Use CSS and JavaScript only for the visual layering behavior, not as the content delivery mechanism itself.

How Does Parallax Scrolling Perform on Mobile Devices?

Mobile parallax is a genuinely different problem from desktop parallax. The browser behavior, touch input model, and hardware constraints all diverge enough that treating them the same leads to broken or degraded experiences.

iOS Safari disables background-attachment: fixed entirely. The background reverts to static on every iOS device, regardless of implementation quality (LogRocket, 2024). Transform-based parallax using translateY() works as a reliable cross-browser fallback.

Touch Scroll Event Differences

Touch events fire differently from mouse scroll events. Mobile browsers batch touch input and fire scroll events asynchronously to keep native scroll smooth, which breaks synchronous scroll position calculations used in many JavaScript parallax libraries.

The fix is attaching passive scroll listeners: addEventListener(‘scroll’, handler, { passive: true }). This tells the browser the handler will not call preventDefault(), freeing it to scroll without waiting for the JavaScript to finish executing.

iOS Safari transform-based parallax also uses 15-20% more battery than the equivalent CSS fixed-background approach on desktop, due to the extra compositing work the fallback requires (wpdean.com).

Viewport Height Instability

Mobile browsers show and hide the address bar as users scroll, which changes the actual viewport height mid-session.

Parallax sections that calculate positions based on window.innerHeight at load time get those values invalidated when the address bar disappears. The result is layout shift during scroll, directly raising CLS scores.

Standard fix: use CSS custom properties updated on resize, or use dvh (dynamic viewport height) units introduced in CSS in 2022 and now supported across all modern browsers.

Mobile-Specific Implementation Decisions

The Firewatch website handles this cleanly: it detects screens below 600px and serves a non-parallax version with a single static background image (LogRocket, 2024).

Recommended approach by breakpoint:

• Under 600px: disable parallax entirely, use static backgrounds
• 600-1024px: reduce layer count to 2 maximum, cut speed multipliers in half
• Above 1024px: full parallax with GPU optimization

Builder.io research from 2026 recommends keeping speed multipliers between 0.2 and 0.5. Going above 0.7 on any viewport increases reported motion sickness complaints in user testing.

What is the Difference Between Parallax Scrolling and Scroll Animations?

These terms get used interchangeably, but they describe different things. Parallax scrolling is one specific output of scroll animation logic. Scroll animations are the broader category.

What the CSS Scroll-Driven Animations API Changes

Chrome 115 (July 2023) shipped the CSS Scroll-Driven Animations API, which introduced ScrollTimeline and ViewTimeline as native browser animation timelines (Chrome for Developers, 2023).

What this means practically: you can now write parallax as a pure CSS animation tied directly to scroll position, with no JavaScript at all. The animation runs on the compositor thread by default.

Tokopedia implemented scroll-driven animations using this API and reported CPU usage dropping from 50% to 2% during scroll, with an 80% reduction in lines of code compared to their previous JavaScript scroll event approach (Chrome for Developers, 2024).

As of early 2026, the API is fully supported in Chrome, Edge, and Opera. Firefox support is behind a feature flag. Safari has not yet shipped it (Smashing Magazine, 2024).

Where Libraries Like GSAP Blur the Line

GSAP ScrollTrigger handles both parallax and broader scroll animations through the same plugin interface. This is why the terms get conflated in practice.

GSAP ScrollTrigger capabilities cover 3 distinct behaviors:

• Parallax: layer position changes relative to scroll offset
• Scroll-triggered: animation starts when element enters viewport, runs on its own timeline
• Scrubbed: animation state directly reflects scroll position, like the Scroll-Driven API

Using one library for all three makes technical sense, but it also means “I used GSAP for parallax” can mean any of these three things depending on the implementation.

How Do You Implement Parallax Scrolling Without Hurting Performance?

Performance-safe parallax comes down to 2 rules: keep all animation on the compositor thread, and never let scroll calculations block the main thread.

Compositor-Safe CSS Properties

Use only these properties for parallax layer movement:

• transform: translateY() and transform: translateX()

• opacity

• will-change: transform on each animated layer

Avoid top, left, margin, height, or width in any scroll handler. These properties trigger layout recalculation on the main thread on every scroll event, which causes the 15-30 repaints per second that tanks performance (wpdean.com).

Speed multipliers between 0.2 and 0.5 create convincing depth without inducing motion discomfort. Builder.io testing in 2026 found multipliers above 0.7 consistently produced user complaints about dizziness.

The prefers-reduced-motion Implementation

This is not optional if your site serves a general audience. WCAG 2.2 Section 2.3.3 covers animation from interactions, and many jurisdictions treat accessibility as a legal requirement (Cloudways, 2026).

The implementation takes 4 lines of CSS:

 @media (prefers-reduced-motion: reduce) { .parallax-layer { transform: none !important; animation: none !important; } } 

In JavaScript, check window.matchMedia(“(prefers-reduced-motion: reduce)”).matches before attaching any scroll listeners. If it returns true, skip the scroll handler entirely and leave layers at their default static positions.

JavaScript Scroll Handler Optimization

Raw scroll event listeners fire many times per second. Without throttling, each fires a layout calculation that blocks everything else on the main thread.

requestAnimationFrame pattern:

let ticking = false; window.addEventListener('scroll', () => { if (!ticking) { requestAnimationFrame(updateParallax); ticking = true; } }, { passive: true });

function updateParallax() { // update layer positions here ticking = false; }

The passive: true flag is critical on mobile. Without it, the browser cannot begin scrolling until the event handler completes. Chrome DevTools will flag this in the Performance panel as a long task blocking the main thread.

Image Optimization for Parallax Backgrounds

Parallax background images are almost always the Largest Contentful Paint element on the page. Unoptimized, they are the single biggest threat to LCP scores.

Target under 200KB per parallax background layer using WebP or AVIF format. WebP reduces file size by 25-35% compared to JPEG at equivalent visual quality. Use in the HTML head for above-the-fold parallax images so the browser loads them before the render-blocking phase ends.

Which Websites and Brands Use Parallax Scrolling Effectively?

The clearest way to understand what good parallax looks like is to study sites where the effect supports the content rather than competing with it.

Apple Product Pages

Apple’s iPhone and MacBook product pages are the most-replicated model for commercial parallax. Hardware features appear through layer-based scroll depth transitions tied to specific scroll positions rather than continuous background drift.

What makes it work: each scroll stage reveals a single new product attribute. The parallax is the pacing mechanism for structured product information, not a standalone visual effect. Performance scores on Apple’s product pages consistently rank well despite heavy visual content, because Apple invests heavily in SVG and WebP optimization throughout.

Firewatch Game Website

The Firewatch site is the most-cited parallax case study in web design. It uses 5 distinct landscape layers, each moving at a different speed, to recreate the visual depth of the game’s art style directly in the browser.

It also handles the mobile problem well. Below 600px it disables parallax entirely and serves a single static background image (LogRocket, 2024). The site degrades gracefully rather than serving a broken parallax experience to mobile users.

Spotify Wrapped

Spotify’s annual Wrapped campaign pages use scroll-driven depth animations to guide users through their personal listening data. The scroll animation adds emotional weight to statistics that would otherwise read as a flat data display.

The key design decision: parallax is applied only to the transition moments between data sections, not to the data itself. Text and numbers remain static and readable. The depth effect frames the content without interfering with it.

NASA Prospect

NASA used editorial parallax for science communication on the Prospect site. Background imagery moves at a controlled depth rate behind scientific text, reinforcing the subject matter visually without distracting from content legibility.

It is a good example of parallax working for interactive content that is primarily informational rather than commercial. The effect adds context rather than spectacle.

No-Code Platforms

Webflow and Squarespace both offer built-in parallax modules usable without writing code. Webflow handles it through its Interactions panel. Squarespace includes it as a section toggle in supported templates.

Elementor Pro on WordPress gives granular control through its Motion Effects panel, with a speed slider that maps to scroll velocity. These tools handle GPU optimization internally, though they still require image optimization and prefers-reduced-motion implementation from the developer side.

FAQ on Parallax Scrolling

What is parallax scrolling in web design?

Parallax scrolling is a web design technique where background layers move slower than foreground content during scroll. The speed difference creates an illusion of depth. It is built using CSS transforms or JavaScript scroll event handlers.

Is parallax scrolling bad for SEO?

Not directly. But poorly implemented parallax increases load time, hurts Core Web Vitals scores, and can prevent Googlebot from indexing JavaScript-rendered content. Single-page parallax layouts also limit internal linking opportunities.

Does parallax scrolling work on mobile?

Inconsistently. iOS Safari disables background-attachment: fixed entirely. Transform-based parallax works better, but touch scroll events behave differently from mouse input. Most developers disable or simplify parallax below 600px viewport width.

What is the difference between parallax scrolling and scroll animations?

Parallax scrolling specifically involves layers moving at different speeds to simulate depth. Scroll animations cover any element state change triggered by scroll position, including fades, scaling, and rotation. Parallax is one type of scroll animation.

What CSS property is used for parallax scrolling?

transform: translateY() is the recommended property. It runs on the compositor thread, keeping animation off the main thread. Avoid using top or margin, as these trigger layout recalculation on every scroll event.

What JavaScript libraries are used for parallax scrolling?

The three most widely used are Rellax.js (lightweight, 2.1KB minified), GSAP ScrollTrigger (full scene control), and ScrollMagic (event-driven scroll sequences). CSS-only implementations via the Scroll-Driven Animations API are increasingly common in Chrome.

Does parallax scrolling affect page speed?

Yes, when implemented carelessly. Unoptimized parallax triggers 15-30 repaints per second during scroll. Heavy background images delay Largest Contentful Paint. CSS-based parallax consumes 40-60% less CPU than JavaScript-heavy alternatives.

Is parallax scrolling accessible?

Not by default. Users with vestibular disorders can experience dizziness from continuous motion effects. WCAG 2.2 requires an option to disable animations. Implement the prefers-reduced-motion media query to serve a static fallback automatically.

What types of websites use parallax scrolling?

Creative agencies, portfolio sites, product launch pages, and brand storytelling microsites use it most. Apple, Spotify, and NASA have all used parallax effectively. Standard e-commerce and service sites typically benefit more from fast, static layouts.

What is the CSS Scroll-Driven Animations API?

It is a browser-native API introduced in Chrome 115 (2023) that lets developers create scroll-linked animations in pure CSS, with no JavaScript. Animations run on the compositor thread by default, making parallax effects significantly smoother and more performant.

Conclusion

This conclusion is for an article presenting parallax scrolling as a design technique that rewards careful implementation over blind adoption.

The scroll depth effect works. Done right, it increases time on page, strengthens visual hierarchy, and turns a static layout into a layered, scroll-driven experience.

But the tradeoffs are real. GPU compositing, passive scroll listeners, and WebP-optimized background layers are not optional extras. They are the baseline for any parallax that performs well across devices.

Accessibility matters too. The prefers-reduced-motion` media query takes minutes to add and protects users with vestibular disorders from a genuinely harmful experience.

Use parallax where it serves the content. Skip it where it does not. That judgment is what separates effective web animation from visual noise.