2026年6月23日

スクロール方向の逆転をCSSアニメーションで実現する：Opposing Scroll Directionsの実践

スクロール方向で異なるアニメーションを制御する時代が来た

2026年、CSS Scroll-Driven Animations（スクロール駆動アニメーション）が実用的なフェーズに入った。これまではIntersection ObserverやJavaScriptに依存していたスクロール連動演出を、CSSだけで記述できる。特に注目すべきは「Opposing Scroll Directions（逆方向スクロール）」の実装だ。これは、上スクロールと下スクロールで異なるアニメーションを定義できる仕組み。開発者はこの機能を使い、スクロール方向によって内容を切り替えるUIを、パフォーマンスを落とさずに実装できる。

Opposing Scroll Directionsの基本構造

CSS Scroll-Driven Animationsでは、animation-timeline: scroll()でスクロールをトリガーにできる。Opposing Scroll Directionsはscroll-directionプロパティで制御する。具体的な記述は次の通り:

.element {
  animation-timeline: scroll(nearest);
  scroll-direction: opposing;
}

これだけで、要素がスクロール方向に応じて異なるキーフレームを実行する。たとえば下スクロール時はフェードイン、上スクロール時は別の動き、という具合だ。scroll-directionにはnormal（デフォルト）、reverse（逆方向のみ反応）、opposing（両方向で別キーフレーム）が指定できる。

なぜ「逆方向の制御」が重要か

従来、スクロール位置に応じたアニメーションはできても、方向を意識した制御は難しかった。ユーザーが戻ったときだけ異なる演出をしたい——たとえば「メニューをスクロールダウンで表示、アップで非表示」という要件はJavaScriptの助けが必須だった。Opposing Scroll Directionsはその壁をCSSで破壊する。インフィードスクロールの読み込みインジケーターや、固定ヘッダーの表示/非表示切り替え、パララックスの方向別速度変更など、適用範囲は広い。

実装の落とし穴：ブラウザ互換性とパフォーマンス

2026年6月時点、この機能はChrome 124以降とEdge 124以降でサポートされている。FirefoxはNightlyで試験的対応。Safariは未サポートのため、プログレッシブエンハンスメントが必要だ。パフォーマンス面では、CSSアニメーションはGPUコンポジットで動作するため、JavaScriptより大幅に高速。ただし大量の要素にscroll-direction: opposingを適用すると、レイアウトスレッドに負荷がかかる。対象を画面外の要素に絞るか、contain: layout styleを併用することを推奨する。

実践例：プログレスバーが方向で色変化

具体的なユースケースとして、スクロール方向に応じて色が変わるプログレスバーを考えてみる。下スクロール時は青、上スクロール時は赤に変化させる:

@keyframes progress-color {
  from { background: blue; }
  to   { background: red; }
}

.bar {
  animation-timeline: scroll(body);
  scroll-direction: opposing;
  animation-name: progress-color;
}

これで、ユーザーがどこまで進んだかを直感的に把握できるUIがCSSだけで完成する。JavaScriptは完全に不要。

Opposing Scroll DirectionsがもたらすUIパラダイム

この機能は、スクロールを「位置」ではなく「動作」として扱う発想をCSSに埋め込んだ。これにより、ユーザーの操作意図に応じてフィードバックを変える――いわゆる「意味的なスクロール」が可能になる。たとえば、記事の先頭に戻るときだけホームボタンが光る、あるいはスクロール方向でナビゲーションの開き方が変わるといった体験を、アクセシビリティを損なわずに実現できる。ブラウザのスクロール復元（scroll restoration）とも衝突しにくい設計なのも利点だ。

これからの展望：View Transitionsとの融合

Scroll-Driven Animationsの進化は止まらない。すでにView Transitions APIとの組み合わせが提案されており、スクロール位置に応じてページ遷移が異なるといった表現が視野に入っている。Opposing Scroll Directionsはその基盤として、スクロール方向を明確に区別するAPIを提供する。2026年後半には、scroll-directionに加えてscroll-velocity（スクロール速度）の指定が追加される見込みで、よりリッチな操作感覚をCSSで記述できるようになるだろう。

参照

この記事を書いた人

理人と理子

ギフプロのブログを運営している理人（リト）と理子（リコ）です！理は知性を表す漢字でもあるので、AIを連想させる名前にしてもらいました。ブログの内容はAIで作成しているところもありますが、読者の方にとって有意義な情報になるように完全自動化ではなく、人の目も通して作成しています！