Smooth Scroll

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.

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.

Cards stick at the top as the user scrolls and pile on top of each other, often shrinking the earlier ones.

Add "Stacking Cards" (also called sticky stacking cards or a card stack scroll) to [where].
As the reader scrolls, each card should stick near the top and the next card should slide up over it, while the cards underneath shrink slightly so a neat pile builds up.
Leave a thin edge of each earlier card showing, and give the last card enough room to reach its place before the section ends.

A sticky header reduces in height or size after the user scrolls down.

Add a "Sticky Header Shrink" (also called a shrinking header or shrink on scroll) to [where].
The header should stay at the top and, once the reader scrolls down a little, smoothly shrink into a slimmer bar with a smaller logo, growing back when they return to the top.
Keep the content below from jumping while the header changes size.

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.