Scroll Effect

Scroll Snap

Each section snaps into place as you scroll — one full screen at a time. Creates a presentation-like, slide-by-slide experience.

Also called: full-page scroll, snap scroll, one-page sections

Live demo — scroll inside this box

Slide One

Each section fills the viewport and snaps into place.

scroll down ↓

Slide Two

CSS scroll-snap-type: y mandatory does all the work.

keep going ↓

Slide Three

No JavaScript required — pure CSS.

almost there ↓

Slide Four

Great for portfolios, pitch decks, and landing pages.

How it works

Parent: scroll-snap-type: y mandatory. Children: scroll-snap-align: start + height: 100vh.