Image FXcssimagelab.com
Scroll · 54 / 56

Scroll Parallax

The photo pans and deepens as the card transits the viewport, like a window opening onto a scene.

Image
Green natural landscape

Exports pan on scroll — the preview runs a continuous demo loop.

Adjust
1.15
3%
Metadata
interaction
On scroll · static fallback
browser
Enhanced — scroll-driven animations
reduced motion
included
touch fallback
Identical on touch
Edit the CSS above — the preview updates live.

About Scroll Parallax

Scroll Parallax pans the photo vertically as the card scrolls through the viewport, scrubbed directly by scroll position (reversible, not a timed loop) so it reads as gentle depth. It uses pure-CSS scroll-driven animations (animation-timeline: view()) gated behind @supports (animation-timeline: view()); browsers without support render the finished photo — a clean static fallback, no JavaScript. The image is pre-scaled by --ifx-par-zoom so the pan never exposes card edges — keep --ifx-par-dist (pan travel) below (zoom - 1) / 2 so the translate stays within the zoom buffer. Keep the prefers-reduced-motion guard INSIDE the @supports block: it pins the image at the centered zoom with no pan, because the global reduced-motion CSS only flattens durations, which scroll timelines ignore.

Use cases

  • landing
  • portfolio
  • editorial
  • gallery

Browser support

Enhanced — scroll-driven animations. This effect uses an enhanced feature — provide a graceful fallback for older browsers.

Accessibility

  • Essential content is never hidden behind hover.
  • Includes a prefers-reduced-motion fallback.
  • Touch fallback: identical on touch.
  • Keyboard accessible — the effect also triggers on focus-within.