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

Bramus

CSS または JavaScript を使用したスクロールドリブン アニメーションについて学ぶための 10 部構成の動画コース"Unleash the Power of Scroll-Driven Animations"をリリースしました。

このシリーズは YouTube で視聴できます。最初の動画を以下に埋め込んでいます。

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

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

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

Browser Support

  • Chrome: 115.
  • Edge: 115.
  • Firefox Technology Preview: supported.
  • 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 部: まとめ。

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

その他のリソース