「スクロールドリブン アニメーションのパワーを解き放つ」がリリースされました。これは、CSS または JavaScript を使用したスクロールドリブン アニメーションについて学べる 10 部構成の動画コースです。
YouTube でシリーズを視聴できます。最初のエピソードはここに埋め込まれています。
スクロールドリブン アニメーション
スクロールドリブン アニメーションを使用すると、既存の CSS アニメーションまたは WAAPI アニメーションをスクロール時にアニメーション化できます。そのため、スクロール ドリブンのアニメーションは、これらの API がもたらすすべてのメリットを継承します。これには、メインスレッドがブロックされたときにジャンクが発生しない、ハードウェア アクセラレーションによるスクロール ドリブンのアニメーションも含まれます。
スクロール ドリブン アニメーションは Chrome 115 以降の Chrome で利用可能で、段階的な拡張に最適です。
スクロール ドリブン アニメーションについて詳しくは、動画シリーズまたはドキュメントをご覧ください。
エピソード
このコースは 10 のエピソードから構成され、スクロール ドリブン アニメーションを構成するコアコンセプトの説明と、いくつかの実用的なアプリケーションの 2 つの大きなパートに分かれています。
- エピソード 1: はじめに。
- エピソード 2: 基本コンセプト:
scroll()
とScrollTimeline
。 - エピソード 3: コアコンセプト:
view()
とViewTimeline
。 - エピソード 4: 基本コンセプト: タイムライン範囲の詳細
- エピソード 5: 基本コンセプト: タイムラインの検索と名前付きタイムライン
- エピソード 6: 実践: スクロール コンテナにスクロール シャドウを追加する。
- エピソード 7: 実践: さまざまな方向に要素をアニメーション化する。
- エピソード 8: 実践的な応用: スクロール時に 3D モデルなどをアニメーション化する。
- エピソード 9: 実践的な応用: スクロール速度の検出
- エピソード 10: 結び
エピソードは、前回のエピソードで説明したデモや手法に基づいて進むため、順番に視聴することをおすすめします。各エピソードで紹介されているデモとツールはオンラインで入手でき、説明欄にリンクが記載されています。
その他のリソース
- ドキュメント: スクロールドリブン アニメーションでスクロール時に要素をアニメーション化する
- デモとツール: scroll-driven-animations.style
- DevTools デバッガ拡張機能を入手する