この記事では、アニメーションの進(jìn)捗狀況をスクロールにリンクする新しいWebテクノロジーであるスクロールリンクアニメーションについて説明します。以前はCSSだけで達(dá)成できましたが、この記事では、WebアニメーションAPI（WAAPI）とScrollTimelineクラスを使用したJavaScriptアプローチに焦點(diǎn)を當(dāng)てています。

Waapiを簡(jiǎn)単に確認(rèn)し、 ScrollTimelineを使用してスクロール駆動(dòng)型のアニメーションを作成します。これは、特に現(xiàn)在のブラウザの互換性の制限を考慮して、CSSのみのソリューションの強(qiáng)力な代替品を提供します。

WAAPI：簡(jiǎn)単な復(fù)習(xí)

WAAPIにより、アニメーションをJavaScript制御できます。シンプルなCSSアニメーションを考えてみましょう。水平に拡大しながら赤から暗赤色に移行するバー。 WAAPI同等物は簡(jiǎn)潔で柔軟です：

新しいアニメーション（
  新しいkeyframeeffect（
    document.QuerySelector（'。ProgressBar '）、
    {
      BackgroundColor：['Red'、 'Darkred']、
      変換：['Scalex（0）'、 'Scalex（1）']、
    }、
    {
      期間：2500、
      塗りつぶし：「フォワード」、
      緩和：「線形」、
    }
  ））
）。遊ぶ（）;

または、より簡(jiǎn)潔にElement.animate()を使用して：

 document.queryselector（'。ProgressBar '）。
  {
    BackgroundColor：['Red'、 'Darkred']、
    変換：['Scalex（0）'、 'Scalex（1）']、
  }、
  {
    期間：2500、
    塗りつぶし：「フォワード」、
    緩和：「線形」、
   }
）;

どちらの例でも、キーフレーム（アニメーションプロパティ）とオプション（期間、緩和など）を定義します。

スクロルチメリンの統(tǒng)合

アニメーションをスクロール依存性にするために、 ScrollTimelineを統(tǒng)合します。このクラスは、スクロールコンテナの進(jìn)行狀況にリンクされたアニメーションタイムラインを作成します。重要な構(gòu)成オプションは次のとおりです。

• source （またはクロムのscrollSource ）：スクロール可能な要素。デフォルトはdocument.scrollingElementになります。
• orientation ：スクロール方向（例えば、垂直の「ブロック」）。デフォルトは垂直になります。
• scrollOffsets ：タイムラインがアクティブな場(chǎng)合の進(jìn)行狀況間隔を定義します。

例：

 const myscrolltimeline = new Scrolltimeline（{
  出典：document.scrollingelement、
  オリエンテーション：「ブロック」、
  スクロールオフセット：[
    新しいcssunitvalue（0、 'パーセント'）、
    新しいcssunitvalue（100、 'パーセント'）、
  ]、、
}）;

これをWAAPIアニメーションに添付してください：

新しいアニメーション（
  新しいkeyframeeffect（
    document.queryselector（ '＃progress'）、
    {transform：['scalex（0）'、 'scalex（1）']、}、
    {期間：1、fill： 'forwards'}
  ）、、
  myscrolltimeline
）。遊ぶ（）;

またはElement.animate()で：

 document.queryselector（ "＃progress"）。
  {
    変換：["scalex（0）"、 "scalex（1）"]
  }、
  { 
    期間：1、 
    記入：「フォワード」、 
    タイムライン：myscrolltimeline
  }
）;

これにより、アニメーションがスクロール駆動(dòng)型になります。 Chromiumは現(xiàn)在、 scrollSourceを使用していることに注意してください。

ブラウザの互換性とポリフィル

現(xiàn)在、ChromiumベースのブラウザのみがScrollTimeline完全にサポートしており、多くの場(chǎng)合、機(jī)能フラグが必要です。 Robert Flackによるスクロールタイムラインポリフィルは、より幅広い互換性を提供します。

 'https://flackr.github.io/scroll-timeline/dist/scroll-timeline.js';

高度な使用法：要素ベースのオフセット

絶対オフセットを超えて、 scrollOffsets要素ベースのオフセットを使用して、スクロールコンテナ內(nèi)の要素の位置に基づいてアニメーション化できます。これらのオフセットは次のとおりです。

1. target ：追跡された要素。
2. edge ：ターゲットのエッジタイムラインウォッチ（例えば、 'start'、 'end'）。
3. threshold ：視認(rèn)性率（0.0-1.0）。

例：

 {
  ターゲット：document.queryselector（ '＃targetel'）、
  エッジ： 'end'、
  しきい値：0.5、
}

複數(shù)のオフセットオブジェクトを使用できます。

CSS対JavaScript：比較

CSSとJavaScriptアプローチはどちらも、スクロール関連のアニメーションを?qū)g現(xiàn)します。 CSSは、シンプルさとプログレッシブエンハンスメントに適していますが、現(xiàn)在のブラウザーサポートは限られています。 JavaScriptはより広い互換性を提供しますが、JavaScriptが無(wú)効になっているユーザーに慎重に検討する必要があります。選択は、プロジェクトのニーズと優(yōu)先順位に依存します。提供された例は、WAAPIとScrollTimelineを使用してJavaScriptアプローチの柔軟性とパワーを示しています。

以上がWebアニメーションAPI（WAAPI）とScrollTimelineを使用したスクロールリンクアニメーションの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。