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

Bramus

CSS または JavaScript を使用したスクロールドリブン アニメーションについて学ぶための 10 部構成の動画コース「スクロールドリブン アニメーションの力を解き放つ」をリリースしました。

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

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

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

スクロール駆動型アニメーションは Chrome 115 以降の Chrome で利用でき、プログレッシブ エンハンスメントに最適です。

Browser Support

  • Chrome: 115.
  • Edge: 115.
  • Firefox: behind a flag.
  • Safari: 26.

Source

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

エピソード

このコースは 10 個のエピソードで構成され、2 つの大きなパートに分かれています。1 つはスクロール駆動型アニメーションを構成するコアコンセプトの説明、もう 1 つはいくつかの実用的なアプリケーションです。

  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: アウトロ。

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

その他のリソース