IntersectionObserver はどのようにしてページ スクロール時の CSS3 アニメーションを強化できますか?

IntersectionObserver API を使用したページ スクロールでの CSS3 アニメーションのトリガー

CSS3 アニメーションを Web ページに組み込む場合、アニメーションが途中でトリガーされたり、アニメーションが表示されなかったりすると、ユーザーは問題に遭遇する可能性があります。ビューポート。この問題に対処するために、IntersectionObserver API は、ユーザーのビューポートに入ったときにのみ要素をアニメーション化できるソリューションを提供します。

IntersectionObserver API

IntersectionObserver API を使用すると、開発者は交差点の変化を観察できます。ターゲット要素と祖先要素またはドキュメント ビューポートの組み合わせ。この API は、ターゲット要素が表示または非表示になったときに呼び出されるコールバック関数を提供します。

実装

この機能を実装するには:

1. コールバック関数を使用して IntersectionObserver オブジェクトを作成します。 inViewport を使用して、要素のクラスをその要素に基づいて切り替えます。可視性:

const inViewport = (entries, observer) => {
  entries.forEach(entry => {
    entry.target.classList.toggle("is-inViewport", entry.isIntersecting);
  });
};

const observer = new IntersectionObserver(inViewport);

2. 必要に応じて交差オブザーバー オプションを設定します (root、rootMargin、threshold など)。
3. data-inviewport 属性を使用してターゲット要素を監視します。交差点オブザーバー:

document.querySelectorAll('[data-inviewport]').forEach(el => {
  observer.observe(el, obsOptions);
});

4. クラス セレクターを使用して CSS アニメーションを実装します:

[data-inviewport="fade-in"] {
  transition: 2s;
  opacity: 0;
}
[data-inviewport="fade-in"].is-inViewport {
  opacity: 1;
}

これらの手順に従うことで、要素の内容に基づいてアニメーションを動的にトリガーできます。ビューポートでの可視性が向上し、ページスクロール中により直感的で魅力的なユーザーエクスペリエンスが提供されます。

以上がIntersectionObserver はどのようにしてページ スクロール時の CSS3 アニメーションを強化できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。