Parallax Image

Overview

Parallax Image gives one visual a slower pulse than the page around it. The effect is small; the pacing signal is not.

Use Parallax Image when a single visual needs depth without becoming a gallery or scene. Editorial, brand, and product photography pages can use it to make one image feel tied to the scroll pace. The page job is focus: one visual earns attention without asking for a full interaction system.

The thing to watch is image cropping and offset. If the parallax distance exceeds the safe crop area, the image exposes empty edges or shifts against the surrounding copy.

Install Command

Usage Code

Component Code

Example Production Use Case

A brand page introducing a hero product photograph: Parallax Image gives the image a slight scroll depth while the copy remains still. The outcome is focus: the product visual feels intentional without turning the section into a showpiece.

Best Used For

• Hero visuals and section breaks where a single image needs quiet depth without stealing the copy.
• Hero and section-break visuals that need a quiet sense of weight.
• Parallax Image creates a concrete scroll outcome that a static section would not deliver.

Not For

Not for image-critical shopping, documentation, or pages where the picture must stay perfectly stable for evaluation.

Not for pages where motion makes product detail harder to inspect than a still image.

Performance Budget

Animate transform and opacity, avoid layout reads in scroll handlers, pre-size media, and clean up timelines/listeners when the route changes.

Accessibility and Mobile

The animated sequence must match DOM order. On mobile, replace pinned or horizontal mechanics with stacked sections, native swipe, or static cards.

Common Mistakes

• Setting offsets larger than the safe crop area.
• Adding parallax where precise image inspection matters.
• Forgetting to reserve image dimensions before motion starts.