Parallax Trigger

Overview

The Parallax Trigger creates sophisticated scroll effects used by luxury brands. Place it between sections to trigger the "curtain" effect.

When to Use

• After video sections — Let a video stay visible while content scrolls over
• Hero transitions — Create a dramatic reveal as visitors scroll
• Visual storytelling — Build narrative through scroll-based reveals
• Luxury aesthetics — High-end brands use this effect extensively

Quick Setup

How It Works

The Parallax Trigger has no settings because it's purely a positioning utility:

1. You add a section (e.g., a video hero)
2. You add the Parallax Trigger immediately after
3. The section above becomes sticky at the top of the viewport
4. All sections below slide over the sticky section like a curtain

Visual Example

┌─────────────────────────────┐
│  [Video Section]            │  ← Becomes STICKY
│  - Will stick at top        │
├─────────────────────────────┤
│  [Parallax Trigger]         │  ← Invisible, takes no space
├─────────────────────────────┤
│  [Product Grid]             │  ← Slides OVER the video
│  - Must have solid bg       │
├─────────────────────────────┤
│  [Reviews]                  │  ← Also slides over
│  - Must have solid bg       │
└─────────────────────────────┘

Requirements

Sections Before the Trigger

The section immediately preceding the parallax trigger:

• Will become position: sticky
• Will stay at the top of the viewport
• Should have visual content worth revealing (video, hero image, etc.)

Sections After the Trigger

All sections following the parallax trigger must:

• Have a solid background color (not transparent)
• If background is transparent, the theme will apply a default white background

Ideal Section Combinations

Technical Details

The section:

• Takes up zero space in the layout (height: 0)
• Is invisible (display: none on the inner div)
• Has aria-hidden="true" for accessibility
• Uses JavaScript to apply sticky positioning dynamically

Sticky Positioning Logic

• If the sticky section is shorter than viewport: sticks at top
• If the sticky section is taller than viewport: sticks when bottom reaches viewport bottom (so you can see the entire section scroll up)

Best Practices

Design Considerations

1. Use with impactful visuals — Videos and large images work best
2. Keep sticky sections short — Viewport height or less is ideal
3. Solid backgrounds required — Don't forget this on following sections
4. Test the scroll experience — Ensure it feels natural

Performance

1. Limit use to one per page — Multiple parallax triggers can be disorienting
2. Optimize sticky content — Heavy videos will stay in memory
3. Consider mobile — Effect works but may be less impactful on small screens

Accessibility

• The trigger is hidden from screen readers
• Sticky sections remain accessible
• Content flow is maintained for keyboard navigation

Troubleshooting

Effect not working

• Verify the Parallax Trigger is placed directly after the target section
• Check for other sections between the target and trigger
• Ensure JavaScript is enabled

Content shows through the "curtain"

• Following sections must have solid backgrounds
• Add a background color to transparent sections
• Check color scheme settings on the following sections

Sticky section too tall

• The section will still work but sticks when bottom reaches viewport
• Consider making the sticky section viewport-height or shorter
• Use responsive height settings on the sticky section

Multiple sticky sections

• Only place one Parallax Trigger per page
• Multiple triggers may cause unpredictable z-index issues
• If you need multiple effects, reconsider the page design