Parallax Mask Design Structure

This effect is built using a 3-layer architecture:

1. Outer Layer (Track)

A tall container (300vh) that provides the scrollable area. It acts as the "track" for the animation timeline.

2. Middle Layer (Sticky)

A sticky container (100vh) that holds the Background Image. It stays fixed in the viewport while the user scrolls through the outer track.

3. Inner Layer (Mask)

A wide element (200vw) that moves horizontally. Using mix-blend-mode: screen, its Black Text becomes transparent to reveal the middle layer's image.

↓ Scroll down to see how they interact ↓

NTU CAMPUS