Text Marquee on Scroll

A row of content slides sideways in an endless, seamless loop.

Add a "Marquee" (an infinite horizontal scroll, also called a ticker) to [where].
The content should slide from right to left at a slow, steady speed in a seamless loop with no visible jump.
Pause it on hover, and stop the motion when the user prefers reduced motion (prefers-reduced-motion).

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.

A word is duplicated into many stacked copies that shift with scroll.

Add a "Text Repetition" effect (also called repeated text scroll) to [where].
A word should be copied into a stack of fainter outline copies that spread out from behind it as the user scrolls, and fold back together when scrolling up.
Tie the spread directly to the scroll position, and hide the extra copies from screen readers so the word is read only once.

A heading is cut into horizontal slices that shift sideways against each other as the page scrolls.

Add a "Sliced Text" effect (also called on-scroll sliced text) to [where].
A large heading should be cut into horizontal slices that slide sideways against each other as the user scrolls, lined up into the whole word at the start.
Tie the shift directly to the scroll position so scrolling back reverses it, and keep the heading as one readable text for screen readers.

An element or scene scales up or down as the user scrolls.

Add a "Zoom on Scroll" effect (also called scroll zoom or scale on scroll) to [where].
While the section is held in view, the element should grow smoothly from a small card until it fills the whole view, in step with the scroll, and shrink back when scrolling up.
Scale it without pushing the layout around it, and show it at its final size without the zoom 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.