「スクロールドリブン アニメーションの力を活用」のご紹介

Bramus

このたび、CSS または JavaScript を使用したスクロールドリブン アニメーションのすべてを学べる 10 部構成の動画コース「Unleash the Power of Scroll-Driven Animations」がリリースされました。

YouTube でシリーズを視聴できます。最初のエピソードはここに埋め込まれています。

スクロールドリブン アニメーション？

スクロールドリブン アニメーションでは、既存の CSS または WAAPI アニメーションを使用して、スクロール時にアニメーション化できます。そのため、スクロールドリブン アニメーションは、これらの API のメリットをすべて引き継いでいます。これには、メインスレッドがブロックされてもジャンクの影響を受けない、ハードウェア アクセラレーションによるスクロールドリブン アニメーションが含まれます。

Chrome 115 以降の Chrome では、スクロールドリブン アニメーションを使用できるようになりました。これは、プログレッシブ エンハンスメントに最適です。

対応ブラウザ

  • 115
  • 115
  • x

ソース

スクロールドリブン アニメーションについて詳しくは、動画シリーズまたはドキュメントをご覧ください。

エピソード

このコースは 10 のエピソードで構成されており、大きく 2 つの部分に分かれています。スクロールドリブン アニメーションを構成する基本概念について説明した後、いくつかの実践的な応用例です。

  1. エピソード 1: はじめに。
  2. エピソード 2: 基本コンセプト: scroll() と ScrollTimeline
  3. エピソード 3: 基本コンセプト: view() と ViewTimeline
  4. エピソード 4: 基本コンセプト: タイムラインの範囲をわかりやすく解説
  5. エピソード 5: 基本コンセプト: タイムライン検索と名前付きタイムライン
  6. エピソード 6: 実践的な応用: スクロール コンテナにスクロール シャドウを追加する
  7. エピソード 7: 実践的な応用: 要素をアニメーション化する
  8. エピソード 8: 実践的応用: 3D モデルのアニメーション化などをスクロールする
  9. エピソード 9: 実用的な応用: スクロール速度検出
  10. エピソード 10: 結び。

エピソードは、これまでのエピソードで説明したデモやテクニックを土台としているため、順番に視聴することをおすすめします。各エピソードで紹介するデモとツールは、説明欄にリンクがあり、オンラインで入手できます。

その他のリソース