スクロールで表示、読了プログレスバー、パララックス、スティッキーストーリーを、それぞれCSSスクロール駆動アニメーション、IntersectionObserver、GSAP ScrollTriggerの3通りで作ります。
スクロールアニメーションは、コンテンツが画面に入ったときやページがスクロールされたときに効果を再生します。モダンなCSSでは、animation-timeline: view()またはscroll()でキーフレームをスクロールに連動させ、対応ブラウザーならスクリプトは不要です。JavaScriptのIntersectionObserverはどこでも表示用クラスを付けられ、GSAP ScrollTriggerはピン留めやスクラブするタイムラインを扱えます。prefers-reduced-motionは必ず尊重しましょう。
手法を選ぶ
よく求められる4つの効果、スクロールで表示、読了プログレスバー、パララックス、スティッキーストーリーを、純粋なCSS、IntersectionObserverを使った素のJavaScript、GSAP ScrollTriggerのそれぞれで紹介します。CSS版はスクロールできるフレーム内でライブ動作し、オブザーバー版はこのページ上で動くデモとして実行されます。
アニメーションの進行を時間ではなくスクロールに結び付けるものです。scroll()は、スクロールコンテナが上から下までどれだけスクロールしたかに従います。view()は1つの要素が表示領域を通過する過程に従うので、要素が入ってきて出ていくまでにキーフレームが進みます。
ChromeとEdgeはバージョン115から、Safariはバージョン26から対応しています。Firefoxではこの機能がデフォルトで有効ではなく設定の裏にあったため、頼る前にcaniuseで確認し、必ずフォールバックを用意してください。
要素が表示領域に入ったり出たりするタイミングを知るには、はい。ブラウザーが交差を非同期で計算し、変化があったときだけ呼び出してくれます。一方scrollリスナーは1秒に何度も実行され、カクつきの原因になるレイアウトの読み取りを誘発しがちです。
単純な表示やプログレスバーなら不要です。GSAP ScrollTriggerが真価を発揮するのは、ピン留めするセクション、スクラブする複数ステップのタイムライン、スナップ、そして現時点ですべてのブラウザーで同じ挙動が求められる効果です。
prefers-reduced-motion: reduceのメディアクエリ内では、コンテンツを最終状態で表示し、パララックスや大きな動きをなくします。JavaScriptでは、アニメーションを作る前にwindow.matchMediaで同じクエリを確認します。穏やかなopacityのフェードであれば、通常は許容されます。
各フレームはそれぞれ独立してスクロールします。animation-timeline非対応のブラウザーでは、@supportsのガードによってすべてが表示されたまま静止します。
各カードはviewportに入るとフェードしながら浮き上がります。animation-rangeで効果を入場フェーズに限定しています。
scroll(root)はドキュメントのスクローラーに従います。リスナーなしで、バーが0から全幅まで伸びます。
ボックスがviewportを横切る間、内側のレイヤーがページより遅く動きます。モーション軽減時は無効になります。
画像はposition: stickyで固定されたまま、各ステップがフレームの中央を通過するときに明るくなります。
このページ上部のライブデモは、同じパターンをReactで実行しています。こちらの版は、どのフレームワークでも、フレームワークなしでも動作します。
先にhtmlへクラスを追加し、スクリプトが実行されたときだけカードを非表示から始めます。スクリプトが失敗してもカードは表示されたままです。
進捗には正確なスクロール位置が必要なので、これだけは1フレーム分の間引きを入れたpassiveなscrollリスナーを使います。
画面中央の細い監視帯を通過しているステップをアクティブとしてマークします。
コードのみです。ScrollTriggerはGSAPのプラグインで、どちらもGSAP独自のライセンスのもとで無料で使えます。公開前にライセンスを読んでおきましょう。
gsap.matchMediaは、読者がモーション軽減を求めていないときだけセットアップを実行し、設定が変わると元に戻します。
枠内をスクロールしてください。カードは一度だけ表示され、バーは進捗を追い、縞模様のレイヤーはコンテンツより遅く動き、固定パネルは中央を通過するステップに追従します。
モーション軽減がオンのため、カードは動きなしで表示され、パララックスは無効です。
デモ内のスクロール進捗
スクロールできるデモ領域
スクロールを始めてください。
パララックスレイヤー
無料で始める · クレジットカード不要