フルページスクロールスナップ デモ
SCROLL

Full-Page Scroll Snap — Demo

スクロールで
次の世界へ

CSS scroll-snap-type と IntersectionObserver を組み合わせた
フルページスクロールスナップの実装デモです。
マウスホイール・スワイプで次のセクションへ移動します。

SCROLL DOWN →
FEATURES

— Features —

3つの実装ポイント

📌
scroll-snap-type
コンテナに設定。y mandatory でY軸方向を強制スナップ。ブラウザネイティブの機能のため軽量。
⚡
scroll-snap-align
各セクションに設定。start でセクション先頭に吸着。always で1枚ずつ確実に止まる。
🎬
IntersectionObserver
セクションの表示を検知してクラスを付与。スクロール時のアニメーション発火に使用。
DATA

— Numbers —

数字で見る
パフォーマンス

CSS ネイティブ実装のため、jQueryプラグインより圧倒的に軽量。
Core Web Vitals への影響も最小限です。

0KB
追加ライブラリ不要
60
FPS スムーズ動作
3
行のCSSで実装可能
CODE

— Implementation —

最小実装

/* ① コンテナ */
.snap-container {
  height: 100dvh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;  ← ★核心
}

/* ② 各セクション */
.snap-section {
  height: 100dvh;
  scroll-snap-align: start;       ← ★核心
  scroll-snap-stop: always;       ← 1枚ずつ止める
}

たったこれだけ。あとはJS不要でブラウザがスナップを処理します。

START

— Get Started —

MAKE
IT
YOURS

このデモのソースコードをコピーして、
あなたのサイトに組み込んでみてください。
WordPressのカスタムHTMLブロックにも貼り付けられます。

↑ TOP へ戻る