Parallax Backdrop Effects

Demo Info

Demo Information

11advanced

Create parallax scrolling effects combined with dynamic backdrop-filter blur.

Key Concepts

Parallax scrolling
Scroll-based blur changes
Creating depth with parallax

Technical Details

const blur = 10 + scrollY / 20;
const translateY = scrollY * 0.5;
backdrop-filter: blur(${blur}px);
transform: translateY(${translateY}px);
/* Parallax with dynamic blur */

← Back to Advanced Examples

Found a bug or want to contribute? Check out the GitHub repo

Parallax Backdrop Effects

Scroll to see parallax effects with dynamic blur

Scroll-Based Parallax Layers

Layer 1

Parallax movement with blur intensity changes

Blur: 10.0px | Offset: 0px

Layer 2

Different parallax speed and blur rate

Blur: 15.0px | Offset: 0px

Layer 3

Slowest parallax, fastest blur increase

Blur: 20.0px | Offset: 0px