Horizontal Scroll Section

Slides move horizontally past a viewport, snapping one item into place at a time.

Add a "Carousel Slide" (also called a slider or swipe carousel) to [where].
Each step should slide the row sideways so the next slide snaps into the center, smooth and decelerating, with the neighbours peeking at the edges and the position dots following along.
Move one slide at a time, support swipe on touch as well as buttons and arrow keys, and keep the controls labelled for screen readers.

Large text lines slide horizontally as the page is scrolled vertically.

Add a "Text Marquee on Scroll" (also called a scroll text marquee or scroll velocity text) to [where].
Large lines of text should slide sideways as the page scrolls down, with alternate rows moving in opposite directions, and slide back when scrolling up.
Tie the movement to the scroll position, keep the long lines from causing a horizontal scrollbar, and keep them still for users who prefer reduced motion.

Scrolling settles onto defined snap points such as slides or sections.

Add "Scroll Snap" (also called scroll snapping or snap scrolling) to [where].
When scrolling stops, the view should settle neatly onto the nearest section so each one lines up with the edge instead of stopping halfway.
Use the browser's native snapping so wheel, touch and keyboard scrolling all keep working, and make sure content taller than the view can still be read in full.

An element stays locked in place during a scroll range while other content or animation progresses.

Add a "Pinning" scroll effect (also called a pinned section or sticky section) to [where].
One panel should stay locked in place while the content beside it scrolls past, switching to match the step being read, and it should let go when the section ends.
Prefer native sticky positioning over hijacking the scroll, and make sure every step still reads well without the pinned panel on small screens.

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 bar or ring fills as the user scrolls through the page or article.

Add a "Scroll Progress Indicator" (also called a reading progress bar) to [where].
A thin bar along the top should fill from left to right in step with how far the reader has scrolled, reaching full width at the end.
Tie it directly to the scroll position with no easing lag, and keep it from covering the content.