CSSスクロール駆動アニメ
JavaScript無しでスクロール連動。新CSSの animation-timeline で、上部に進捗バー(scroll())、各行は画面に入るとふわっと出現(view())。
プレビュー
スクロール
操作枠内をスクロールすると動きます。
仕様書
- 向く場面
- JS を書かずに進捗バーと出現を付けたい
- スクロール量に線形連動させたい演出
- 未対応環境で即表示に落ちてよい装飾
- 避ける場面
- 全ブラウザで同じ動きが必須の案件（Firefox は要フラグ）
- 一度出たら戻さない出現（view() は戻ると消える）
- 構成要素
- スクロール容器
- 進捗バー
- ヒント
- 出現する行
- 持っている状態
- 通常
- キーボード
Tab でスクロール容器へ（tabindex=0）、↑↓/PageDown でスクロール
- 支援技術
行は常に DOM にあり読み上げ順は不変。未対応ブラウザでは最初から全表示。進捗バーは aria-hidden の装飾。reduced-motion では行の出現を止め全表示（バーは位置連動なので残す）
- 動き
JS なし。バーは scroll() で scaleX 0→1、各行は view() の entry 0%〜cover 35% で fade＋24px rise。時間でなく位置に連動
デザインの要点
- animation-range: entry 0% cover 35% で「入り始めから 35% 見えるまで」に出現を割り当てる。cover 100% だと読める頃には通り過ぎている
- 時間でなく位置に連動するので、戻すと消える。一度出したら戻したくない出現には向かず、IntersectionObserver を使う
- 進捗バーは scroll(nearest) で最寄りのスクロール容器に結ぶ。ページ全体なら scroll(root)
- 未対応ブラウザでは animation が無視されて最初から全表示になる。fallback の JS を書かなくても内容は失われない
実装メモ
IntersectionObserver も rAF も使わない、純CSSのスクロール連動です。animation-timeline: scroll()/view() は Chrome/Edge/Safari対応(Firefoxは要フラグ)。未対応ブラウザでは要素は最初から表示されます。実ページでは scroll(root) でページ全体に連動させられます。
コード（コピーして使えます）
<div class="sd-scroller" tabindex="0">
<div class="sd-bar" aria-hidden="true"></div>
<p class="sd-hint">下にスクロール ↓</p>
<div class="sd-item">CSSだけで</div>
<div class="sd-item">スクロールに</div>
<div class="sd-item">連動して</div>
<div class="sd-item">ふわっと</div>
<div class="sd-item">出現する</div>
<div class="sd-item">🎉</div>
</div>