GODRICH
#css-animation#button#loader#transition#scroll#dashboard#ui#design-trends

9 CSS Parallax Scrolling — No JS, Scroll-Driven

· Godrich · 9 items · 17 min read

ScrollSCSSCSS onlyScrollHero section

CSS parallax scrolling is scroll-linked motion — a background, a layer, a whole hero — driven entirely by animation-timeline: scroll(root), with no scroll

Slow-moving background01 parallax-scroll-bg-slow 3-layer depth parallax02 parallax-scroll-layer-3-depth Text drifts over image03 parallax-scroll-text-over-image Hero shrink parallax04 parallax-scroll-hero-shrink Horizontal timeline parallax05 parallax-scroll-horizontal-timeline Layered depth cards06 parallax-scroll-depth-cards Sticky + parallax combo07 parallax-scroll-sticky-parallax Mouse-move parallax08 parallax-scroll-mouse-parallax Scroll zoom-out09 parallax-scroll-zoom-out-scroll

Auto-plays · click a tile to jump to its section · all nine in one zip

Watch instead of scroll on this page: none of the demos below have a real scrollbar, so each one fakes the effect with a two-second loop running back and forth inside a fixed, non-scrollable iframe. The order below moves from a single drifting layer toward genuine staging. Items 01 through 04 change one property at a time, and 05 through 07 combine that same scroll(root) timeline with sticky positioning, a horizontal axis, and stacked layers. Items 08 and 09 are the idea-form entries, swapping the scroll trigger for a cursor and opening on a close-up that zooms out. For the whole family of things scroll can drive beyond speed differences, the CSS scroll animations are the founding set, and when 07's pinning moves up to the header, the CSS sticky header effects take that slot.

01Slow-moving background

What you see

A single background layer drifts upward at roughly 0.4x the page's own scroll speed, so it lags behind the foreground title and opens a gap the eye reads as depth.

Slow-moving background
Open in a new tab

01 · Slow-moving background — Measured area 3.371% · moving frames 23/23Original by GODRICH · SCSS and React ship in the zip · See the password

0.4배translateY단일 레이어

Where a css parallax scrolling effect fits

Reach for it on a landing hero background or a banner sitting right under the nav — anywhere a full parallax rig would be overkill for one moving layer.

.bgslow__bg {
  position: absolute;
  inset: -20% -10%;
  opacity: .5;

  @supports (animation-timeline: scroll()) {
    animation: drift linear both;
    animation-timeline: scroll(root);
  }
}

@keyframes drift {
  from { transform: translateY(0); }
  to   { transform: translateY(-24px); }
}

023-layer depth parallax

The motion

Three circles sit back, mid, and front, and animation-timeline: scroll(root) drives each one through its own keyframes at 10px, 26px, and 46px of total travel.

3-layer depth parallax
Open in a new tab

02 · 3-layer depth parallax — Measured area 7.535% · moving frames 23/23Original by GODRICH · SCSS and React ship in the zip · See the password

0.2·0.5·0.8배세 겹translateY

Good places for it

The front layer moves nearly five times as far as the back one, which is what actually reads as perspective rather than three flat circles scrolling in sync. Use the full three-layer version on a game showcase or a brand-story section where one flat layer would look thin.

.layer3__back  { animation: drift-back linear both;  animation-timeline: scroll(root); }
.layer3__mid   { animation: drift-mid linear both;   animation-timeline: scroll(root); }
.layer3__front { animation: drift-front linear both; animation-timeline: scroll(root); }

@keyframes drift-back  { to { transform: translateY(-10px); } }
@keyframes drift-mid   { to { transform: translateY(-26px); } }
@keyframes drift-front { to { transform: translateY(-46px); } }

03Text drifts over image

What it does

The photo itself barely moves — only 14px of total travel — while the caption above it rises 70px over the same scroll distance, so the two layers visibly separate instead of tracking together.

Text drifts over image
Open in a new tab

03 · Text drifts over image — Measured area 31.153% · moving frames 23/23Original by GODRICH · SCSS and React ship in the zip · See the password

1.6배mix-blend-modetranslateY

When to use it

mix-blend-mode: difference keeps the caption legible no matter what color sits underneath it as it slides. It suits an editorial-style hero or a photo-essay title where the headline is meant to feel like it cuts through the image rather than just sitting on it.

.textimg__image {
  animation: image-drift linear both;
  animation-timeline: scroll(root);
}
.textimg__text {
  mix-blend-mode: difference;
  animation: text-drift linear both;
  animation-timeline: scroll(root);
}

@keyframes image-drift { to { transform: translateY(-14px); } }
@keyframes text-drift  { from { transform: translateY(60px); } to { transform: translateY(-70px); } }

04Hero shrink parallax

What you see

The hero title scales down to about 55% of its starting size and fades to a quarter of its opacity over the same scroll range.

Hero shrink parallax
Open in a new tab

04 · Hero shrink parallax — Measured area 3.955% · moving frames 23/23Original by GODRICH · SCSS and React ship in the zip · See the password

scale 1→.6opacity 동반축소+페이드

Where it fits

Both effects come from one keyframe animation instead of two separate ones. It reads as the headline stepping back to make room, which fits a landing page's first screen or the opening beat of an app-intro sequence.

.heroshrink__title {
  animation: shrink linear both;
  animation-timeline: scroll(root);
}

@keyframes shrink {
  from { transform: scale(1);   opacity: 1; }
  to   { transform: scale(.55); opacity: .25; }
}

05Horizontal timeline parallax

The motion

The card row never receives a horizontal scroll gesture of its own — animation-timeline: scroll(root) reads the page's normal vertical scroll and feeds it straight into a translateX keyframe instead.

Horizontal timeline parallax
Open in a new tab

05 · Horizontal timeline parallax — Measured area 13.686% · moving frames 23/23Original by GODRICH · SCSS and React ship in the zip · See the password

translateXscroll(root)가로 흐름

Good places for it

That one substitution turns an ordinary vertical scroll into a row of cards traveling sideways, which fits a company-history page or a product roadmap better than a flat vertical list. It needs no extra scroll container and no scroll-event code to keep the two axes in sync.

.hline__track {
  display: flex;
  animation: travel linear both;
  animation-timeline: scroll(root);
}

@keyframes travel {
  from { transform: translateX(0); }
  to   { transform: translateX(-120px); }
}

06Layered depth cards

What it does

Three cards start stacked with a slight offset and scale difference, and the front card peels away fastest while the two behind it trail at 94% and 88% of its distance, growing slightly as they're revealed.

Layered depth cards
Open in a new tab

06 · Layered depth cards — Measured area 16.794% · moving frames 23/23Original by GODRICH · SCSS and React ship in the zip · See the password

scale 단계별animation-timeline: scroll(root)translateY

When to use it

The scale change is what sells the stack — without it the three cards would just look like they slide at different speeds instead of sitting at different depths. Feature-highlight cards and pricing comparisons both read well with this, since revealing one card at a time keeps attention on a single option.

.depthcards__card--1 {
  animation: peel-1 linear both;
  animation-timeline: scroll(root);
}
.depthcards__card--2 { transform: translateY(9px) scale(.94); }
.depthcards__card--3 { transform: translateY(18px) scale(.88); }

@keyframes peel-1 { to { transform: translateY(-34px) scale(1); } }

07Sticky + parallax combo

What you see

position: sticky pins the caption at 40% from the top of its container while the striped background behind it keeps drifting on its own animation-timeline: scroll(root) track.

Sticky + parallax combo
Open in a new tab

07 · Sticky + parallax combo — Measured area 77.093% · moving frames 23/23Original by GODRICH · SCSS and React ship in the zip · See the password

position sticky배경만 이동고정+흐름

Where it fits

The two layers visibly separate as a result, instead of scrolling together. Storytelling sections and product-spec walkthroughs both lean on this, since a caption that holds still gives a reader time to finish the sentence before the next background pattern arrives.

.stickypar__caption {
  position: sticky;
  top: 40%;
}
.stickypar__bg {
  animation: bg-drift linear both;
  animation-timeline: scroll(root);
}

@keyframes bg-drift {
  from { transform: translateY(0); }
  to   { transform: translateY(-40px); }
}

08Mouse-move parallax

The motion

Three circles trail the cursor at three different multipliers — 0.3, 0.6, and 1 — so the layer with the highest multiplier swings furthest and reads as the closest one to the viewer.

Mouse-move parallax
Open in a new tab

08 · Mouse-move parallax — Measured area 6.447% · moving frames 23/23Original by GODRICH · SCSS and React ship in the zip · See the password

pointermove레이어별 배율translate

Good places for it

Getting the cursor into CSS still takes a few lines of script: a pointermove listener normalizes the cursor to a -0.5 to 0.5 range and writes it into two custom properties the layers read. It fits a product showcase or a portfolio hero where a viewer is expected to rest their cursor over the piece rather than scroll straight past it.

// --mx and --my come from a pointermove listener, -0.5 to 0.5
.mousepar__layer {
  transform: translate(
    calc(var(--mx, 0) * var(--depth) * 22px),
    calc(var(--my, 0) * var(--depth) * 22px)
  );
  transition: transform 120ms ease-out;
}
.mousepar__layer--a { left: 18%; top: 24%; }
.mousepar__layer--b { left: 62%; top: 54%; }
.mousepar__layer--c { left: 40%; top: 68%; }

09Scroll zoom-out

What it does

The media block starts scaled up to 145% of its real size, and animation-timeline: scroll(root) drives it back down to 100% as the page scrolls.

Scroll zoom-out
Open in a new tab

09 · Scroll zoom-out — Measured area 22.201% · moving frames 12/23Original by GODRICH · SCSS and React ship in the zip · See the password

scale 1.4→1scroll(root)줌아웃

When to use it

As a result, the frame around it only becomes visible once the zoom finishes. It suits a product-detail opener or a gallery intro where the first thing a visitor sees should feel like a close-up before the fuller page reveals itself.

.zoomout__media {
  transform: scale(1.45);
  animation: zoom-out linear both;
  animation-timeline: scroll(root);
}

@keyframes zoom-out {
  from { transform: scale(1.45); }
  to   { transform: scale(1); }
}

Where it breaks — the traps

Support for scroll timelines

animation-timeline: scroll(root) is the one property every pattern above depends on, and it isn't universal yet. caniuse tracks it as supported from Chrome 115 and Safari 26, with Firefox still shipping it behind a flag as of September 2026. Every demo above wraps its scroll(root) animation in an @supports (animation-timeline: scroll()) block, so a browser that doesn't understand the property falls back to a still layer instead of a half-broken one. Skip that guard and a Firefox reader on the stable channel sees item 04's hero permanently mid-shrink, because the base transform still applies but the keyframe animation driving it never starts. Grab the nine as working files rather than retyping every guard by hand: the archive opens once you type x6462unj exactly as it reads here, with no dashes or spaces added. Every pattern inside carries the same fallback, not just the one shown above. The same amplitude caution applies when the trigger isn't scroll at all — 08's cursor-following layers obey it too, and the CSS shake animations solve the identical problem for form errors by keeping the swing small.

Accessibility

Reduced motion

Every pattern above only stops moving under prefers-reduced-motion because its own reduced-motion block cancels it, and each one throws away a different amount of motion rather than freezing identically. Items 01, 02, 05, and 07 drop their animation entirely and hold a still transform, so each background stays exactly where it starts instead of drifting. Item 09's media snaps straight to its fully revealed, un-zoomed state instead of looping back and forth. Item 04's title keeps its full opacity and size rather than settling mid-shrink, and item 08 cancels both its animation and its pointer-driven transition so nothing trails the cursor at all. MDN documents prefers-reduced-motion and the operating-system settings that turn it on. Items 03 and 06 simply rest in their final layout: the caption sits still over the image, and the three cards stay stacked without peeling apart.

More css parallax scrolling examples and every other scroll-driven pattern this site has published sit behind the CSS hub, and the about page covers what these files include and what they leave out.

FAQ

Does CSS parallax scrolling work without JavaScript?

Eight of the nine patterns above run purely on animation-timeline: scroll(root), so scrolling itself drives every keyframe with zero JavaScript attached to the page. The one exception is the mouse-move layer in item 08, which needs a short pointermove listener because a cursor position has no scroll-linked timeline of its own to read from. Everything else here — the shrinking hero, the sticky caption, the horizontal timeline — ships as pure CSS. Assembling these onto one whole page rather than one section is the picture the website scroll effects collect.

Why does my parallax layer jump instead of moving smoothly with the scroll?

That's almost always animation-timeline: scroll(root) failing silently rather than throwing an error. Check that the @supports (animation-timeline: scroll()) guard actually wraps the animation, and confirm the browser is one of the versions that supports the property. A layer set to position: fixed instead of absolute or sticky inside its scrolling container is the second most common cause, since a fixed element ignores the very scroll it's meant to track.

Which css parallax scroll animation is fastest to add to an existing page?

Item 01's slow-moving background is the smallest change — one element, one keyframe, and one animation-timeline line, with no layout restructuring needed around it. Item 08's mouse-move parallax takes the longest to wire up, since it needs a pointermove listener, a couple of custom properties, and per-layer depth values tuned by hand.

Enter the archive password

The password is inside this article. You will find it as you read.