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

Bramus

「スクロールドリブン アニメーションのパワーを解き放つ」がリリースされました。これは、CSS または JavaScript を使用したスクロールドリブン アニメーションについて学べる 10 部構成の動画コースです。

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

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

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

スクロール ドリブン アニメーションは Chrome 115 以降の Chrome で利用可能で、段階的な拡張に最適です。

Browser Support

  • Chrome: 115.
  • Edge: 115.
  • Firefox: behind a flag.
  • Safari: not supported.

Source

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

エピソード

このコースは 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: 結び

エピソードは、前回のエピソードで説明したデモや手法に基づいて進むため、順番に視聴することをおすすめします。各エピソードで紹介されているデモとツールはオンラインで入手でき、説明欄にリンクが記載されています。

その他のリソース