スクロールをトリガーにしたCSSアニメーションを視覚化し、デバッグが簡単にできるデベロッパーツールの機能拡張 -Scroll-Driven Animations Debugger
Post on:2023年9月26日
sponsors
スクロールをトリガーにしたCSSアニメーションは、どのようにデバッグしていますか？
ブラウザの枠内で完結するアニメーションであれば、ブラウザ上ですべての挙動を確認できますが、枠外で開始や終了するアニメーションだと確認できません。
スクロールをトリガーにしたCSSアニメーションを視覚化し、デバッグが簡単にできるデベロッパーツールの機能拡張がリリースされたので、紹介します。
参考: Scroll-Driven Animations Debugger
by Bramus!
記事の掲載にあたり、元サイト様にライセンスを得ています。
まずは、さっそく機能拡張のインストールから。
下記のページにChromeでアクセスし、「Chromeに追加」をクリックするだけです。起動方法や使い方は後述します。
Scroll-Driven Animations Debugger -Chrome ウェブストア
この機能拡張は、スクロール駆動アニメーション（Scroll-driven Animations）で実装されたスクロールをトリガーにしたアニメーションを視覚化およびデバッグするためのものです。
デベロッパーツールで通常通りに要素を「検証」し、「Scroll-driven Animations」パネルでその要素のアニメーションを視覚化します。
Scroll-driven Animationsについて詳しくは、下記をご覧ください。
CSSでの実装が大きく変わる！ Scroll-driven Animations スクロールをトリガーにしたアニメーションを実装する方法
では、機能拡張を使用してみましょう。
スクロールをトリガーにしたアニメーションを使用したページを表示します。
このページでは至る所にアニメーションが実装されていますが、まずは上部のマウスがスクロールすると拡大するアニメーションをデバッグしてみます。
デベロッパーツールを起動します。
デベロッパーツールを起動
調べたい要素を右クリックし「検証」を選択します。この場合は、headerのすぐ下にあるimg要素を選択してください。
調べる要素を「検証」
デベロッパーツールの「スタイル」パネルの端から「Scroll-Driven Animations」を選択します。
「Scroll-Driven Animations」を選択
これで準備が整いました。
準備完了
ページをスクロールするとマウスの画像がアニメーションで拡大表示されるのを視覚化します。
アニメーションの視覚化
このページには他にもたくさんのアニメーションが実装されています。
下部にある「Edit Values」をクリックすると、アニメーションの範囲エディタが表示され、開始範囲と終了範囲のインジケーターでアニメーションを調整できます。
アニメーションの範囲エディタ
スクロールをトリガーにしたアニメーションには、いろいろなものがあります。たとえば、画像をアニメーションで水平移動させるデモとか。
カバーフローのデモページ: Scroll-driven Animations
スクロール量に応じて変化するプログレスバーとか。
プログレスバーのデモページ: Scroll-driven Animations
複数のカードが次々に表示され、重なるアニメーションのデモとか。
sponsors
