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