{ "id": "motion:motion-scroll-snap", "slug": "motion-scroll-snap", "kind": "motion", "title": { "ja": "スクロールスナップ", "en": "Scroll snap" }, "aiName": "CSS scroll snap", "summary": { "ja": "1画面ずつピタッと止まる", "en": "Snaps to one full screen at a time" }, "number": 21, "group": "pin-nav", "techniques": [ "scroll-snap", "intersection-observer" ], "rules": [ { "ja": "区画は全部 100vh。高さが違うと吸着先がずれて途中で止まる", "en": "Every section is exactly 100vh; a different height puts the snap in the wrong place" }, { "ja": "名札と末尾の帯も区画として scroll-snap-align: start を付ける", "en": "The title block and closing band are sections too and carry scroll-snap-align: start" }, { "ja": "動きを減らす設定では mandatory を proximity に弱め、吸着を強制しない", "en": "Under reduced motion, relax mandatory to proximity so the scroll is never forced" } ], "reproduction": { "prompt": { "ja": "スクロールスナップ — CSS scroll snap\n\nhtml に scroll-snap-type: y mandatory を付け、縦スクロールが各画面の上端（scroll-snap-align: start）で止まるようにする。\n区画は名札・本文 3 画面・末尾の帯の計 5 つで、どれも高さ 100vh。\nスクロールを離すと最も近い区画の上端へ吸着し、区画の途中で止まることはない。\n本文の各画面は、吸着して見えた時点で図版が 0.7 秒の ease でふわっと現れる（IntersectionObserver で is-in を付ける）。\n動きを減らす設定では scroll-snap-type を y proximity に弱める。CSS と IntersectionObserver だけで実装し、ライブラリは使わない。\n\n外すと崩れる点:\n- 区画は全部 100vh。高さが違うと吸着先がずれて途中で止まる\n- 名札と末尾の帯も区画として scroll-snap-align: start を付ける\n- 動きを減らす設定では mandatory を proximity に弱め、吸着を強制しない\n\n動く実物（1 ファイルで完結する HTML）: https://design-vault.pages.dev/designs/motion-scroll-snap/demo.html", "en": "Scroll snap — CSS scroll snap\n\nApply scroll-snap-type: y mandatory to html so vertical scrolling settles on the top edge of each screen (scroll-snap-align: start).\nThere are five sections (title, three content screens, closing band), each exactly 100vh tall.\nWhen the user releases the scroll, the page snaps to the nearest section top and never rests mid-section.\nOnce a content screen snaps into view, its image fades in over 0.7s with an ease curve, using IntersectionObserver to add is-in.\nUnder prefers-reduced-motion: reduce, weaken the snap to scroll-snap-type: y proximity. Implement with CSS and IntersectionObserver only; no library.\n\nDo not drop:\n- Every section is exactly 100vh; a different height puts the snap in the wrong place\n- The title block and closing band are sections too and carry scroll-snap-align: start\n- Under reduced motion, relax mandatory to proximity so the scroll is never forced\n\nA working example (one self-contained HTML file): https://design-vault.pages.dev/designs/motion-scroll-snap/demo.html" }, "code": { "url": "https://design-vault.pages.dev/designs/motion-scroll-snap/demo.html", "html": "\n\n\n\n\n21 スクロールスナップ — CSS scroll snap\n\n\n\n

スクロールスナップ

CSS scroll snap

1画面ずつピタッと止まる

SCROLL ↓

\n\n

Screen 1 / 3

見出しが入ります

本文のダミーです。区画の上端に止まると、この画面の中身が表示されます。

Screen 2 / 3

見出しが入ります

本文のダミーです。指を離すと、いちばん近い画面の上端へ吸着します。

Screen 3 / 3

見出しが入ります

本文のダミーです。画面の途中で止まることはありません。

\n\n\n\n\n\n\n" } }, "license": "Original", "catalogVersion": 1, "designSchemaVersion": 2, "capabilities": [ "live-preview", "copy-prompt", "get-code" ], "reusePolicy": "construction-reuse", "urls": { "ja": "https://design-vault.pages.dev/designs/motion-scroll-snap", "en": "https://design-vault.pages.dev/en/designs/motion-scroll-snap", "json": "https://design-vault.pages.dev/ai/assets/motion-scroll-snap.json", "designJson": null } }