Zoom on Scroll

A still image slowly zooms and pans across its frame.

Add a "Ken Burns Effect" (also called slow pan and zoom) to [where].
While each image is shown it should very slowly zoom and drift in one direction only, then cross-fade to the next image, which moves in a different direction: calm and continuous.
Keep every image covering its whole frame at every moment so no edge ever shows, and keep the images still for users who prefer reduced motion.

Animation progress is tied directly to scroll position, so scrolling forward or back plays or rewinds it.

Add a "Scroll-Linked Animation" (also called a scroll-driven animation or scroll scrub) to [where].
The animation should move exactly with the scroll position, so scrolling down plays it forward and scrolling up rewinds it on the spot, with no time-based easing of its own.
Map the whole animation to a clear scroll range, and show a sensible static state for users who prefer reduced motion.

An image scales up inside its frame on hover, sometimes panning with the pointer.

Add a "Hover Zoom" effect (also called image zoom on hover or zoom-pan) to [where].
While the pointer is over the image, it should slowly and smoothly scale up inside its frame while the frame keeps its size, and ease back when the pointer leaves.
Clip the image to its frame so nothing spills over the layout, and show the same zoom on keyboard focus.

Layers move at different speeds relative to scroll to create a sense of depth.

Add a "Parallax" scroll effect (also called parallax scrolling or parallax layers) to [where].
Background layers should move more slowly than the content as the page scrolls, the farthest layer moving least, for a subtle sense of depth.
Keep it tied to the scroll position without lag, keep text on the normal-speed layer, and turn the effect off for users who prefer reduced motion.

A header hides when scrolling down and reappears when scrolling up.

Add a "Hide on Scroll Header" (also called headroom or an auto-hide navbar) to [where].
The header should slide up out of view when the reader scrolls down and slide back in on any scroll up: quick and smooth, reacting to direction rather than distance.
Always show it at the very top of the page, ignore tiny scroll jitters, and keep it visible while something inside it has keyboard focus.

Vertical scrolling moves a pinned row of panels sideways.

Add a "Horizontal Scroll Section" (also called horizontal scrolling or a scroll-jacked horizontal gallery) to [where].
When the section reaches the top it should stay pinned while scrolling down moves its row of panels sideways, then release once the last panel is in view.
Tie the sideways movement directly to the scroll position so scrolling back reverses it, and fall back to a normal swipeable row on small screens or for users who prefer reduced motion.