What is Parallax Scrolling in Web Design?

Scroll a page built with parallax and the background drags behind the text instead of moving with it. That lag is the whole effect. Two layers, two speeds, and your eye reads the gap between them as depth even though the page is as flat as any other.

It turns up on landing pages, product launches, and portfolio sites, places where the impression a page leaves counts for more than how fast someone can skim it. The motion comes from CSS transforms, JavaScript, or an animation library doing the math for you.

The World Wide Web Consortium names the effect outright in its 2018 WCAG 2.1 standard, listing parallax effects when scrolling among the animations that must be disableable for visitors with vestibular disorders. Worth knowing before anyone gets attached to the design.

What Is Parallax Scrolling

Layers move at different speeds. That is the entire mechanism. Background drifts slowly, foreground keeps pace with the scroll, and the difference in rate is what your brain converts into distance.

Normal scrolling moves everything together at one rate. Parallax breaks that on purpose, treating the browser’s visible area, the viewport, as a frame that content passes through unevenly.

Two neighbouring techniques get confused with it. Scrollytelling uses scroll position to push a story forward rather than to stack visuals at different speeds. Basic scroll animation fades or slides elements into view, but every layer still travels at the same uniform rate.

Side scrolling video games used the same layering trick decades before browsers could render anything like it, moving distant mountains slower than the ground under the player’s feet.

On the web it goes by one name, built from CSS positioning, JavaScript, or some mix of the two depending on how many layers the scene needs.

How Does Parallax Scrolling Work

The browser tracks how far down the page you have scrolled, then repositions each layer by a different amount based on that number. Background moves slower. Foreground stays at or near the page’s normal speed. The gap between them is the depth.

Scroll Speed Differences Between Layers

Each layer gets a speed multiplier, sometimes called a scroll depth value. Most developers set it through the CSS transform property, applying a translateY offset that scales with scroll position.

Typical numbers land somewhere around here:

• Background layers run at 0.1 to 0.3 times scroll speed
• Midground sits between 0.5 and 0.7
• Foreground runs at full scroll speed, matching normal page movement

How the Depth Illusion Is Produced

No third dimension is involved anywhere. Relative motion does all of the work.

When two layers shift at different rates during one scroll event, the closer one appears to move faster and the distant one appears to lag, which is the same cue human vision already uses to judge distance in the real world.

Browsers recalculate each layer’s position through JavaScript scroll event listeners or, increasingly, native CSS scroll timelines, updating the transform value as the page moves.

How strong the effect feels comes down to how many layers are stacked in the scene and how wide the gap is between the slowest and the fastest of them. Scroll distance matters too. A short flick barely registers the difference. A long uninterrupted scroll makes it obvious.

The Origin of Parallax Scrolling

It did not start on the web. It started in traditional hand drawn animation, decades before CSS or JavaScript existed.

Walt Disney’s studio patented the multiplane camera on November 16, 1936, and used it commercially for the first time in the 1937 short film “The Old Mill,” according to the National Inventors Hall of Fame. The rig stacked up to seven painted glass layers at different distances from the lens and moved each one at its own rate, faking depth in scenes that were literally flat paint on glass.

The web picked it up much later. The name and the momentum both arrived after The New York Times published “Snow Fall” in December 2012, a multimedia feature built on layered scroll effects that went on to win the 2013 Pulitzer Prize for Feature Writing.

Design blogs and marketing agencies copied the pattern fast. By the mid 2010s it was standard issue on landing pages, portfolios, and product launch sites.

Roughly how it travelled:

• 1936 to 1937 Walt Disney’s studio patents and debuts the multiplane camera in traditional animation
• 2012 The New York Times publishes “Snow Fall,” a layered scroll feature that wins the 2013 Pulitzer Prize
• 2013 to 2015 parallax scrolling spreads across landing pages, portfolios, and marketing sites built with CSS and JavaScript

The technique is older than the web itself. The web just gave it a scroll bar to run on.

What Methods Can Be Used to Build Parallax Scrolling

CSS can do it alone. JavaScript can drive it. A library can handle both and spare you the arithmetic. Which one fits usually comes down to how many layers the page needs and how precisely they have to move.

CSS-Only Parallax

The simplest version pins a background image with background-attachment: fixed and lets the rest of the page scroll over it.

That property has inconsistent support on iOS Safari, where it renders as ordinary scroll behavior instead of staying fixed, according to caniuse.com’s 2026 browser compatibility data. Which has been true for years and still catches people out.

The newer option comes out of the CSS Scroll-Driven Animations specification. It links a keyframe animation straight to scroll-timeline, letting the browser handle motion with no JavaScript involved at all.

CSS-only starts falling apart in two places: iOS Safari, where background-attachment: fixed will not reliably stay fixed, and any page needing more than two independently moving layers, which outgrows flat background positioning almost immediately.

Ready made CSS parallax snippets are usually a faster starting point than writing either version of the keyframes from scratch.

JavaScript-Based Parallax

Here the script listens for the scroll event, reads the current position, and updates each layer’s transform value in response.

You need a scroll event listener or the Intersection Observer API to catch position changes, requestAnimationFrame to batch updates so they run once per rendered frame instead of on every scroll tick, and the manual math that turns a scroll position into a translateY value for each layer. None of it is complicated. All of it is easy to get slightly wrong.

This method sidesteps the background-attachment bug completely and behaves the same on desktop and mobile.

Done carelessly, it is also the version most likely to wreck performance, since an unthrottled scroll listener can fire dozens of times per second.

Library-Based Parallax

Hand the scroll math to a pre-built tool and stop writing it yourself. Production sites running four or more layers, easing, or scroll-triggered timelines tend to end up here rather than on one flat background.

Reach for a library when the page has four or more layers moving independently, or when the design calls for eased and timed motion rather than a straight linear link to scroll position. Same goes if three or more elements each need to fire their own animation as they enter the viewport.

Tools and Libraries for Parallax Scrolling

GSAP, Rellax.js, Locomotive Scroll, Skrollr, and AOS cover most of what gets built today. The choice depends on how much visual complexity the page carries, and on whether any of that complexity needs a real 3D rendering pipeline instead of flat CSS transforms.

JavaScript Animation Libraries

GSAP with its ScrollTrigger plugin handles timeline based sequencing and scroll-linked easing, which is what complex multi-layer scenes actually need. Rellax.js goes the other direction: lightweight, dependency free, built for two or three drifting background layers and not much else. Locomotive Scroll smooths native scrolling itself and stacks parallax and reveal effects on top of that.

Skrollr is largely unmaintained now, though it pioneered continuous scroll-position-linked CSS keyframe animation. AOS is simpler and still common, built for toggling CSS classes when elements come into view rather than for continuous motion.

GSAP alone runs on about 2.9 percent of websites whose JavaScript library is known as of September 2026, and it became fully free to use after Webflow acquired the project in 2024, according to W3Techs.

Game frameworks use the same layering logic under a different name. Phaser builds parallax backgrounds directly into its scene and camera system for side scrolling games.

3D and WebGL-Based Tools

Flat CSS layers run out of road once a scene needs true rotation or camera movement rather than vertical drift.

That is the point where developers move to WebGL-based rendering, which draws each layer as part of an actual 3D scene instead of a flat image sliding behind text.

Three.js handles general purpose 3D with custom camera and lighting control. PixiJS suits 2D scenes that still want GPU accelerated rendering and blend modes. Babylon.js is the heavier option, aimed at larger game-like environments with physics built in.

Of those, Three.js shows up most often in parallax work that needs genuine depth of field rather than a flat imitation of it.

Does Parallax Scrolling Affect Website Performance

Yes, and it shows up as dropped frames before it shows up anywhere else. After that it lands on load time and Core Web Vitals scores.

How much it costs depends on the method used and how many layers are animating at once.

Frame Rate and Rendering Cost

Smooth scrolling means hitting 60 frames per second, which leaves the browser roughly 16 milliseconds to recalculate and repaint every layer before the next frame is due.

An unthrottled scroll listener blows through that budget without much effort, since scroll events can fire far more often than the screen actually refreshes.

Batching updates through requestAnimationFrame puts the recalculation on the same clock the browser already uses for rendering. It is the same pattern behind the JavaScript game loop in browser based games.

Pushing that motion onto the compositor thread instead of the main thread, usually called hardware acceleration, keeps it away from the thread that also has to answer taps and clicks.

Three things drive the rendering cost up. Every additional layer needs its own position recalculated each frame. Large uncompressed backgrounds cost more to repaint than small optimized ones. And whether the animation runs on the main thread or the compositor thread changes the whole picture.

Impact on Core Web Vitals

The thresholds worth having in front of you:

• Largest Contentful Paint: good is 2.5 seconds or less, per web.dev’s official thresholds
• Interaction to Next Paint: good is 200 milliseconds or less, and it replaced First Input Delay as Google’s responsiveness metric in March 2024
• Cumulative Layout Shift: good is 0.1 or less
• All three are measured at the 75th percentile of real visits, not averaged across them

Heavy JavaScript-based parallax puts Interaction to Next Paint at risk first, because a long-running scroll handler occupies the same main thread that needs to respond to a tap.

Large uncompressed background images used as parallax layers can also push out Largest Contentful Paint, if they load ahead of whatever the page’s actual hero content is.

Is Parallax Scrolling Accessible

Not by default, no. The motion it depends on can cause real physical symptoms in people with vestibular disorders or ordinary motion sensitivity.

It becomes accessible the moment that motion can be switched off, which is why the prefers-reduced-motion setting carries as much weight here as anything in the visual design.

Vestibular Disorders and Motion Sensitivity

More than 35 percent of US adults aged 40 and older experience vestibular dysfunction during their lifetime, adding up to roughly 69 million people, according to the Vestibular Disorders Association. The same organization estimates that about 10 percent of the general population is more susceptible to motion sickness even without a diagnosed vestibular condition.

For those visitors, layered background and foreground movement produces dizziness, nausea, or a headache rather than the sense of depth it was built to create. Symptoms can outlast the visit, too. Someone who closes the tab after ten seconds of scrolling may still be feeling it twenty minutes later.

Treating this as a core part of web accessibility rather than an edge case is what separates a well built parallax effect from one that quietly shuts out a meaningful share of visitors.

Reduced Motion Settings

The fix already exists at the operating system level, which surprises people who assume it has to be a coding decision.

On macOS and iOS it sits under Accessibility settings, Reduce Motion. Windows calls it Animation effects, also under Accessibility. Android labels it Remove animations.

Browsers detect that system-level choice through a CSS feature built specifically for it. Wrapping parallax motion in a prefers-reduced-motion media query lets the effect fall back to a static layout on its own, with no separate on-page toggle for the visitor to go hunting for.

The W3C names this pattern directly, listing parallax effects when scrolling as one of the animations covered by WCAG success criterion 2.3.3, Animation from Interactions.

So the baseline is simple. Flatten or disable scroll-linked motion whenever prefers-reduced-motion is set to reduce, and never let that motion be the only route to content on the page.

Does Parallax Scrolling Work on All Browsers and Devices

On modern desktop browsers it behaves consistently, provided it is built with CSS transforms or JavaScript rather than the older, buggier properties.

Mobile is where things get uneven, and it deserves its own testing pass rather than an assumption that desktop behavior carries across.

Desktop Browser Support

Chrome, Firefox, Edge, and desktop Safari render transform-based and JavaScript-based parallax the same way, with no visual difference worth mentioning between them. That gives desktop builds solid cross-browser compatibility without vendor-specific workarounds.

The one gap is background-attachment: fixed, which is most of the reason current builds use transform-based positioning instead.

Transform and translateY calculations behave identically across all four. So does requestAnimationFrame timing and scroll event firing, and so does library-based rendering through GSAP, Three.js, and the rest.

Mobile Device Behavior

Mobile devices now generate more than 62 percent of global website traffic, according to StatCounter data reported by Statista for the second quarter of 2025. That share makes mobile behavior the deciding factor for most parallax builds, not the last thing you check.

There is a second problem, and it lives in the browser’s own address bar.

Dynamic viewport units such as dvh were introduced to fix mobile height calculations, and they update live as that address bar slides in and out during scroll. dvh has had more than 95 percent global support since 2023 and it does solve layout overflow. But animate an element sized in dvh inside a scroll-linked effect and it reflows continuously, which reads as jitter rather than motion.

Size parallax layers in fixed pixel or percentage units and keep dvh for elements sitting outside the moving scene.

When Should You Use Parallax Scrolling

Pages built for visual impact, not pages built for fast repeated transactions. A single-product landing page absorbs the extra development time far more comfortably than a page competing on speed and conversion volume.

It earns its place on campaign and product launch pages, on portfolios and case studies where being remembered beats page count, and on storytelling features where scroll position should carry a narrative forward.

The upside is real. A layered page makes a stronger first impression than a static one, holds attention longer when it is designed for a single unhurried read, and lets you sequence information instead of stacking everything above the fold.

The downside is equally real. It takes longer to build than a standard static layout, it raises performance and accessibility risk whenever the layers and motion are not handled carefully, and it works against any page where visitors want to scan and leave. Pricing pages. Checkout. Anywhere the visitor already knows what they came for.

A controlled usability study from Oslo Metropolitan University found no significant difference in task completion time or error rate between parallax and non-parallax versions of the same site, though participants preferred the parallax version overall (2021).

Which tells you what the effect is actually for. Impression, not efficiency.

When Parallax Scrolling Does Not Work

It stops making sense the moment a page’s job shifts from impressing a visitor to moving them through a task quickly.

A few situations make it actively counterproductive rather than merely unnecessary.

The last of those carries the clearest number behind it. 53 percent of mobile visitors abandon a page that has not loaded within 3 seconds, according to Google’s mobile speed research.

Add even a modest delay on a page where speed decides whether the visitor stays, and the build is working against its own goal.

A quick test before committing to it. If the page’s success metric is a completed action, a purchase or a signup, treat parallax as optional at best. If the metric is time spent or brand impression, it has more room to help than to hurt.

How to Build a Parallax Scrolling Effect

The sequence stays the same whichever method ends up handling the motion. And the last two steps are where most working demos fall apart on the way to production.

1. Pick a method. CSS-only for one or two simple layers, JavaScript or a library for anything past that.
2. Structure the layers, separating background, midground, and foreground into their own positioned elements.
3. Assign speed ratios. Each layer gets a scroll depth value, slower for background and full speed for foreground.
4. Wire the scroll trigger, connecting scroll position to each layer’s transform value through CSS scroll-timeline or a JavaScript scroll listener.
5. Test frame rate on a real mid-range phone, not only in desktop developer tools.
6. Add a reduced-motion fallback, wrapping the effect in a prefers-reduced-motion check so it degrades to a static layout automatically.

The CSS-only version of step four leans on CSS keyframes tied to a scroll-timeline rather than a scroll event listener.

Builds break in two predictable places. Too many layers fighting for the GPU drags frame rate under 60fps. Skipping the reduced-motion fallback leaves motion-sensitive visitors with no way to turn any of it off. Both are cheap to prevent and expensive to patch after launch.

Examples of Parallax Scrolling in Web Design

It turns up most on pages selling one product or telling one story, not on pages built for browsing an inventory.

Apple’s iPhone 6 launch page used scroll-linked video instead of static images, so the product rotated and revealed new angles as visitors scrolled, according to the campaign’s own 2015 Cannes Lions awards entry. The same page kept desktop and mobile experiences equally interactive rather than shipping a stripped-down mobile version, a decision the entry credits with holding the launch story together across devices.

Awwwards, a site design recognition platform, regularly features parallax-heavy builds in its daily and site-of-the-day selections, which is a more useful live reference for working designers than any single brand’s campaign.

The trend has moved away from full-page parallax backgrounds that touch every section of a site. What is left is smaller and contained, usually limited to one section rather than the whole page, and increasingly built on CSS scroll-timeline in place of older JavaScript-heavy implementations.

In practice that contained approach means animating a single hero image and leaving the rest of the page alone. The shift tracks with performance and accessibility limits as much as with taste.

FAQ on What Is Parallax Scrolling

What Is the Difference Between Parallax Scrolling and Scrollytelling

Parallax layers backgrounds and foregrounds at different speeds to fake depth. Scrollytelling uses scroll position to advance a story, often swapping entire scenes as the reader moves. The two overlap plenty, but scrollytelling puts narrative sequence ahead of depth illusion.

Is Parallax Scrolling Still Used in Current Web Design

Yes, though narrower than it was. Full-page background parallax has faded compared to five years ago, replaced by smaller single-section effects tied to a hero image or a product reveal. The core mechanism has not gone anywhere. Only the scale of its use has changed.

Does Parallax Scrolling Hurt SEO Directly

No ranking penalty exists for the technique itself. The risk is indirect. Heavy JavaScript layers slow load time and drag on Core Web Vitals scores, and both of those feed into search rankings. Keep it lightweight and optimized and the SEO risk stays small.

Can You Add Parallax Scrolling Without Code, in WordPress, Shopify, or Elementor

Yes. Elementor, Divi, and similar WordPress builders ship parallax widgets that set speed and layer count from a visual panel. Shopify themes often expose the same controls in the theme customizer, and dedicated plugins fill the gap on platforms without native support.

Do Single-Page Parallax Sites Need a Different SEO Approach

Yes, because there is only one URL to rank. Build content around a clear heading hierarchy inside that page, use anchor links for internal navigation, and keep key content in the HTML rather than behind scroll-triggered JavaScript, which crawlers do not always execute.

What Should You Fix First in Parallax Scrolling

Layer count breaks things before the choice of method does, since every additional moving element multiplies the recalculation work a browser performs on each scroll frame.

Cutting layers back recovers more frame budget per change than anything else, and costs the most visual depth per change. On a mid-range phone build, that trade is worth making before you touch library code or scroll-timeline configuration.

So when frame rate is the complaint, get layer count down to three or fewer first. Then swap background-attachment or unthrottled scroll listeners for transform-based or scroll-timeline positioning. The reduced-motion fallback comes last, once whatever motion is left is worth keeping.

Beyond parallax itself, the same scroll-linked logic drives a wider set of CSS scroll effects, worth a look once layer count and motion fallback are settled.