Webアニメーションの巧妙な使用は、ユーザーエクスペリエンスを向上させ、Webサイトの魅力を高めることができます。ただし、アニメーション要素がページの下にある場合、ユーザーはそれを見逃す可能性があります。この記事では、ネイティブJavaScriptを使用してスクロールトリガーアニメーションを?qū)g裝する方法を紹介します。これにより、ユーザーが特定の要素にスクロールし、リソースの無駄を回避し、ユーザーエクスペリエンスを改善するときにのみアニメーションが再生されます。

サードパーティライブラリに頼る必要はありません。ほんの少量のネイティブJavaScriptコードで達成できます。コアは、ターゲット要素がウィンドウに入るかどうかを効率的に検出できる交差點オブザーバーAPIを使用することにあります。

スクロールトリガーイベントを?qū)g裝します

私たちのアプローチには以下が含まれます：

1. scrollTrigger関數(shù)を作成して、特定の要素のスクロールトリガーイベントを処理します。
2. 要素がウィンドウに入ったら、 .activeクラスを追加します。
3. CSS .activeクラスを使用します。

さらに、要素が表示されている場合、特定のアクションを?qū)g行するためにカスタムコールバック関數(shù)をサポートする必要があります。

 scrolltrigger（ '。ローダー'、{
  CB：function（el）{
    el.innertext = 'loading ...'
    loadcontent（）
  }
}）

最後に、古いブラウザーによる交差點オブザーバーAPIの非サポートも扱います。

交差點オブザーバーAPI

交差點オブザーバーAPIを使用すると、ターゲット要素とウィンドウの交差點狀態(tài)を非同期的に観察することができます。これは、スクロールイベントを聞くよりも効率的です。

スクロールトリガー関數(shù)を作成します

最初に、セレクターをパラメーターとして受信するscrollTrigger関數(shù)を作成します。

 function scrolltrigger（selector）{
  let els = document.queryselectorall（selector）;
  els = array.from（els）;
  els.foreach（el => {
    addobserver（el）;
  }）;
}
//サンプルScrolltrigger（'。Scroll-Reveal '）を使用します。

次に、 addObserver関數(shù)を作成し、交差點オブザーバーを使用して要素を聴きます。

 function scrolltrigger（selector）{
  let els = document.queryselectorall（selector）;
  els = array.from（els）;
  els.foreach（el => {
    addobserver（el）;
  }）;
}
関數(shù)addobserver（el）{
    let observer = new IntersectionObserver（（エントリ、オブザーバー）=> {
      entries.foreach（entry => {
        if（entry.isinterSecting）{
          entry.target.classlist.add（ 'Active'）;
          Observer.unobserve（entry.target）;
        }
      }）;
    }）;
  Observer.observe（el）;
}
//サンプルScrolltrigger（'。Scroll-Reveal '）を使用します。

上記のコードは、要素部分が表示されているときに.activeクラスを追加します。より細かい制御のために、交差點オブザーバーのoptionsパラメーターを使用できます。

 function scrolltrigger（selector、options = {}）{
  let els = document.queryselectorall（selector）;
  els = array.from（els）;
  els.foreach（el => {
    addobserver（el、options）;
  }）;
}
関數(shù)addobserver（el、option）{
  let observer = new IntersectionObserver（（エントリ、オブザーバー）=> {
    entries.foreach（entry => {
      if（entry.isinterSecting）{
        entry.target.classlist.add（ 'Active'）;
        Observer.unobserve（entry.target）;
      }
    }）;
  }、options）;
  Observer.observe（el）;
}
// SCROLLTRIGGERの例を使用する（'。Scroll-Reveal '、{
  rootmargin： '-200px'
}）;

今、私たちは最初の2つの目標を達成しました。次に、コールバック関數(shù)サポートを追加します：

 function scrolltrigger（selector、options = {}）{
  let els = document.queryselectorall（selector）;
  els = array.from（els）;
  els.foreach（el => {
    addobserver（el、options）;
  }）;
}
関數(shù)addobserver（el、option）{
  let observer = new IntersectionObserver（（エントリ、オブザーバー）=> {
    entries.foreach（entry => {
      if（entry.isinterSecting）{
        if（options.cb）{
          options.cb（el）;
        } それ以外{
          entry.target.classlist.add（ 'Active'）;
        }
        Observer.unobserve（entry.target）;
      }
    }）;
  }、options）;
  Observer.observe（el）;
}
//サンプルScrolltrigger（'。Loader '、{
  rootmargin： '-200px'、
  CB：function（el）{
    el.innertext = 'loading ...';
    setimeout（（）=> {
      el.innertext = 'タスクが完了しました！ ';
    }、1000）;
  }
}）;

最後に、レガシーブラウザの互換性に対処します。

 function scrolltrigger（selector、options = {}）{
  let els = document.queryselectorall（selector）;
  els = array.from（els）;
  els.foreach（el => {
    addobserver（el、options）;
  }）;
}
関數(shù)addobserver（el、option）{
  if（?。?'intersectionobserver' in Window））{
    if（options.cb）{
      options.cb（el）;
    } それ以外{
      el.classlist.add（ 'Active'）;
    }
    戻る;
  }
  let observer = new IntersectionObserver（（エントリ、オブザーバー）=> {
    entries.foreach（entry => {
      if（entry.isinterSecting）{
        if（options.cb）{
          options.cb（el）;
        } それ以外{
          entry.target.classlist.add（ 'Active'）;
        }
        Observer.unobserve（entry.target）;
      }
    }）;
  }、options）;
  Observer.observe（el）;
}
//サンプルScrolltrigger（'。intro-text '）;
scrolltrigger（ '。スクロールreveal'、{
  rootmargin： '-200px'、
}）;
scrolltrigger（ '。ローダー'、{
  rootmargin： '-200px'、
  CB：function（el）{
    el.innertext = 'loading ...';
    setimeout（（）=> {
      el.innertext = 'タスクが完了しました！ ';
    }、1000）;
  }
}）;

上記の手順を通じて、スクロールトリガーされたアニメーション効果を正常に達成し、ブラウザの互換性を考慮に入れました。 この記事があなたのウェブサイトのユーザーエクスペリエンスの向上に役立つことを願っています。

以上が基本的なJavaScriptでスクロールトリガーアニメーションを作成する方法の詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。