All animations / Parallax
Parallax
Depth through different speeds: layers, windows, mouse, tilt, 3D and scroll-driven effects. 24 animations.
Layered scroll scene
Background layers move slower than the foreground as you scroll, which creates depth.
Fixed background parallax
The oldest trick: background-attachment fixed pins the image to the viewport while the section scrolls over it. One line of CSS.
Pure CSS 3D parallax
Real depth with no JavaScript: a scroll container with perspective, and layers pushed back with translateZ then scaled up to look normal.
Scroll-driven CSS parallax
Each image drifts inside its frame as it crosses the screen, using animation-timeline view() and no script at all.
Mouse parallax
Layers shift against the cursor by different amounts, with smooth easing, so the scene feels like it has real depth.
Tilt (gyroscope) parallax
On a phone the layers move as you tilt the device; on desktop the same scene follows the mouse. iPhone asks permission first.
Image window parallax
Images sit inside a fixed frame and slide slowly within it as the frame scrolls past, like looking through a window.
Horizontal parallax scene
Scrolling down pans a landscape sideways. Distant mountains crawl, near trees race past, so the world has depth.
Giant text parallax
Huge faded words sit behind the content and drift at a different speed from the cards on top of them.
Multi-speed columns
A gallery whose columns scroll at different speeds, so the grid stretches and staggers as you move down.
Zoom parallax
A pinned collage zooms toward you as you scroll. Each picture scales at its own rate, so the outer ones rush past the centre.
Hero fade parallax
As you leave the hero, the background sinks slowly, the headline lifts away and fades, and the next section slides up over it.
Stacking cards
Cards stick near the top and pile up as you scroll, each one settling slightly lower than the last, with earlier cards shrinking back.
Curtain reveal sections
Each section pins in place while the next one slides up and covers it, like pages of a book being laid on top.
Rotate and scale on scroll
Decorative shapes spin and grow or shrink at different rates as they pass through the viewport, adding motion beyond simple up and down.
Layered depth card
An illustrated card whose layers slide by different amounts as the cursor moves across it, with a gentle tilt.
Inertia lag parallax
Columns chase the scroll position with different amounts of smoothing, so they trail behind and catch up like they have weight.
GSAP ScrollTrigger parallax
The industry-standard way: ScrollTrigger scrubs a tween across the scroll range, so images drift and headings move with perfect smoothing.
Auto-scrolling side scroller
A looping landscape that moves on its own, with far layers drifting slowly and near layers racing, like a video game background.
Opposite-direction rows
Rows of big words slide sideways in opposite directions as you scroll, creating a weaving, rhythmic parallax.
Depth tunnel fly-through
Scrolling flies the camera forward through a stack of panels in 3D. Each panel rushes toward you, then passes and fades out.
Reusable data-speed parallax
A tiny drop-in script: put data-speed on any element and it moves at that speed relative to the scroll. Negative values go the other way.
Layered text depth
A headline made of stacked copies. The mouse slides each copy a little further, extruding the word into a 3D slab.
Scroll velocity skew
Cards lean and stretch in the direction you scroll, based on how fast you are moving, then settle when you stop.