Parallax
18 components
Classic Fixed Background
CSS background-attachment: fixed. Zero JS, oldest trick. Degrades to scroll on iOS Safari.
Scroll-driven translateY
rAF-throttled scroll listener translates the bg. Works on iOS. The modern default.
Layered Depth (3 speeds)
Three parallax planes — sky, silhouette, foreground — each at a different scroll speed. Cinematic diorama.
Sticky-pin Storytelling
Image pins to the viewport while panels of content scroll past it. Pure CSS, perfect on iOS.
Clip-path Aperture Reveal
Circular aperture grows from a small dot to fully revealing the image as you scroll.
CSS Perspective Parallax
Self-scrolling section with 3D perspective. Background on a far Z-plane scrolls slower automatically.
Split-band Shear
Image sliced into bands that shear sideways at different rates. Glitchy, editorial.
Scroll-driven Scale
Image zooms in as the user scrolls through the section. Coupled to scroll, not time.
Reverse Parallax
Background moves OPPOSITE the scroll direction. Counter-intuitive and memorable. Use sparingly.
Scroll-scrubbed Image Swap
Sticky section that swaps between N background images as the user scrubs through scroll progress.
Floating Content Cards
3-card feature row where each card drifts upward at its own speed. Subtle depth without taking over the page.
Two-Column Lag
Long-form text scrolls normally on the left; a sticky image on the right parallax-lags. Editorial layout.
Polaroid Scatter
Five tilted polaroid photos scattered across the section, each on its own parallax track. Closer drifts faster.
Product Callouts (Floating Spec Sheet)
Central product photo with floating spec cards that each drift at their own rate. Apple-style anatomy diagram.
Scroll-triggered Reveal
Image scales, translates, and clip-path uncovers as it enters the viewport. A single coordinated entrance.
Mouse-tilt Card
Inline product/article cards that tilt in 3D following the cursor with a radial shine. Apple-product-card feel.