Full-page snap

Every flick lands exactly on the next full-screen slide, like a presentation. No JavaScript.

How it works

scroll-snap-type: y mandatory on the root and scroll-snap-align: start on each section tell the browser to settle on a section edge after every scroll. scroll-snap-stop: always stops fast flicks from skipping slides.

Full file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Full-page snap</title>
<style>
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; }

html { scroll-snap-type: y mandatory; }
section {
  height: 100vh; scroll-snap-align: start; scroll-snap-stop: always;
  background: var(--bg); color: #fff; display: grid; place-content: center; text-align: center;
}
section h2 { font: 900 clamp(6rem, 30vw, 16rem)/.9 system-ui, sans-serif; margin: 0; }
section p { font-size: 1.4rem; margin: 0; opacity: .8; }
</style>
</head>
<body>
<section style="--bg:#264653"><h2>1</h2><p>Snap one</p></section>
<section style="--bg:#2a9d8f"><h2>2</h2><p>Snap two</p></section>
<section style="--bg:#e9c46a"><h2>3</h2><p>Snap three</p></section>
<section style="--bg:#f4a261"><h2>4</h2><p>Snap four</p></section>
<section style="--bg:#e76f51"><h2>5</h2><p>Snap five</p></section>
</body>
</html>

More snap effects