スクロール演出（応用）
横スクロール・スナップ・固定追従など、一歩進んだ表現。
スクロールを一歩進めて使う演出のカテゴリ。横スクロールギャラリー、全画面スナップ、sticky の追従見出し、ピン留めセクション、スクロールストーリーテリング、パララックス、スクロール量に連動したマスク・ズーム、速度に応じたスキューがある。原則は認知負荷。スナップやピン留めは「1画面に1つの話題」に区切り、固定したビジュアルと流れる本文を隣り合わせに保つことで、読み手が追う対象を減らす装置として効く。飾りとして入れると逆にスクロールの自由を奪うので、長い説明を章立てで読ませたい、比較を並べて見せたい、という目的があるときに引く。
使い分け1画面ずつ止めたいなら scroll-snap、章ごとに図を差し替えるなら scrollytelling、数値や文言を切り替えるなら pinned-section。カード列は horizontal-scroll。scroll-parallax / scroll-zoom / scroll-velocity-skew はヒーローの1箇所に限り、本文には使わない。
まず見る3件
- スクロール
スクロールスナップ解説あり
Full-Page Scroll Snap
縦スクロールで全画面セクションがピタッと止まる。scroll-snap-type: y でページめくり感を演出。
- JS ゼロ。scroll-snap-type: y mandatory（容器）と scroll-snap-align: start（各セクション）だけで、慣性も減速もブラウザ任せ
- セクションの高さは容器と同じ 300px に揃える。容器より高いと読み終わる前に次へ吸い寄せられる
- mandatory は必ずどこかで止まる指定。記事のように途中で止まりたい内容は proximity にする
- CSSのみ
- スクロール
ピン留めスクロール
Pinned Scroll Section
あるセクションが画面に固定されたまま、スクロール進行に応じて内部の要素（テキスト/数値）が切り替わる。position:sticky＋スクロール進捗で内部をmorph。
- 固定区間の長さはステージ 300px＋下の余白 400px。1 スライドあたり約 170px のスクロールで、指 1 回のフリックで次へ進む
- 進捗を floor(progress × 3) で 3 段に量子化する。連続値で fade を混ぜると 2 枚が重なった中間状態が読めない
- スライドは absolute で重ね、ステージの高さを 180px に固定する。切替で高さが変わると下のドットが跳ねる
- JS
- スクロール
スクロールストーリーテリング
Scrollytelling
左に章立てテキストが流れ、固定された右のビジュアルがスクロールの章に応じて切り替わる。IntersectionObserverで現在の章を検知。
- 文章の列がスクロールし、ビジュアルの列だけ sticky で固定する。両方固定すると章の進行が伝わらず、両方流れると絵と文が離れる
- 各章の min-height を容器（300px）に近い 260px にする。短いと threshold 0.5 に届く前に次章が入り、絵が飛ぶ
- 現在の章以外は opacity 0.35 で残す。消すと前後の章を目で辿れず、物語の位置が分からない
- JS
使い分け表
| パーツ | 操作 | 技術 | 向く場面 | 状態 |
|---|---|---|---|---|
| 横スクロールギャラリー Horizontal Scroll Gallery | スクロール | JS | 写真・カードを横に並べるギャラリー・スマホで指送りさせたい一覧 | default / active / focus |
| スクロールスナップ Full-Page Scroll Snap | スクロール | CSSのみ | フルスクリーンの自己紹介・作品ページ・区切りのはっきりした塊を1つずつ見せる | default |
| sticky追従ヘッダー Sticky Section Headers | スクロール | CSSのみ | 章立ての長いリスト（連絡先・設定）・今どの章にいるかを常に見せたい一覧 | default |
| スクロールで画像出現 Scroll-Linked Mask Reveal | スクロール | JS | スクロール量に比例して画像を開く演出・主役画像の登場をスクロールで操作させたい | default |
| スクロール連動タイムライン Scroll Timeline | スクロール | JS | 年表・手順を順に点灯させて進行を示す・3〜6 ステップの流れの説明 | default |
| パララックススクロール Parallax Scrolling | スクロール | JS | ヒーローで奥行きを出す風景・イラスト・近景と遠景の速度差で没入感を作る | default |
| ピン留めスクロール Pinned Scroll Section | スクロール | JS | 固定した画面で数値・文言を段階的に切り替える・3ステップの説明をスクロールで進める | default |
| スクロールストーリーテリング Scrollytelling | スクロール | JS | 左の章立て文と右の固定ビジュアルの連動・データや図の変化を文章で説明する記事 | default |
| スクロールズーム Scroll-Linked Zoom | スクロール | JS | スクロールで主役画像を縮小→拡大させる導入・ズームで注目を集める1画面の演出 | default |
| スクロール速度スキュー Scroll Velocity Skew | スクロール | JS | スクロール速度を体感させるキネティックな一覧・作品・ポートフォリオの遊びのある演出 | default |
すべての見本（10件）
- スクロール
横スクロールギャラリー
Horizontal Scroll Gallery
横並びカードを横スワイプで閲覧。scroll-snap-type: x で各カードにピタッと止まる。タッチ対応。
- JS
- スクロール
スクロールスナップ解説あり
Full-Page Scroll Snap
縦スクロールで全画面セクションがピタッと止まる。scroll-snap-type: y でページめくり感を演出。
- CSSのみ
- スクロール
sticky追従ヘッダー
Sticky Section Headers
セクション見出しが position:sticky で上に張りつきながら、下のコンテンツがスクロールする。
- CSSのみ
- スクロール
スクロールで画像出現
Scroll-Linked Mask Reveal
スクロール量に応じて clip-path が開き、画像がだんだん現れる。scroll イベント連動の視覚演出。
- JS
- スクロール
スクロール連動タイムライン
Scroll Timeline
スクロールで各ステップ（年表/手順）が順に点灯する。IntersectionObserver で各要素を検知して色付け。
- JS
- スクロール
パララックススクロール
Parallax Scrolling
地面・木・山の眺めから、スクロールに連れて空・雲・太陽の眺めへカメラが大きくパンするダイナミックなパララックス。近い層ほど速く動いて奥行きが出る。
- JS
- スクロール
ピン留めスクロール
Pinned Scroll Section
あるセクションが画面に固定されたまま、スクロール進行に応じて内部の要素（テキスト/数値）が切り替わる。position:sticky＋スクロール進捗で内部をmorph。
- JS
- スクロール
スクロールストーリーテリング
Scrollytelling
左に章立てテキストが流れ、固定された右のビジュアルがスクロールの章に応じて切り替わる。IntersectionObserverで現在の章を検知。
- JS
- スクロール
スクロールズーム
Scroll-Linked Zoom
スクロール量に応じて画像（グラデdivで代用）や見出しが拡大・縮小する。scrollイベント連動でscaleを変える。
- JS
- スクロール
スクロール速度スキュー
Scroll Velocity Skew
速くスクロールするほど中身がぐにゃっと傾き、止まるとシュッと戻る。スクロール速度を物理量として見せるキネティックな演出。
- JS