基本的なJavaScriptでスクロールトリガーアニメーションを作成する方法

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

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

スクロールトリガーイベントを実装します

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

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

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

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

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

交差点オブザーバーAPI

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

スクロールトリガー関数を作成します

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

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

次に、 addObserver関数を作成し、交差点オブザーバーを使用して要素を聴きます。

 function scrolltrigger（selector）{
  let els = document.queryselectorall（selector）;
  els = array.from（els）;
  els.foreach（el => {
    addobserver（el）;
  }）;
}
関数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）;
  }）;
}
関数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つの目標を達成しました。次に、コールバック関数サポートを追加します：

 function scrolltrigger（selector、options = {}）{
  let els = document.queryselectorall（selector）;
  els = array.from（els）;
  els.foreach（el => {
    addobserver（el、options）;
  }）;
}
関数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）;
  }）;
}
関数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でスクロールトリガーアニメーションを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。