ビューポート内にある要素のみをアニメーション化するにはどうすればよいですか?

ページ スクロールを使用したビューポート内の要素のアニメーション

Q: スクロール中に要素がビューポートに表示されている場合にのみ、Web ページにアニメーションを表示するにはどうすればよいですか?

A: これを実現するには、IntersectionObserver を利用できます。 API.

Intersection Observer API

Intersection Observer API を使用すると、要素とその親要素またはビューポートの間の交差を観察できます。これにより、要素がビューポート内に表示されているかどうかに基づいてイベントをトリガーできます。

アニメーションのトリガーに使用できるクラスを切り替えるために API を使用する例を次に示します。

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

const Obs = new IntersectionObserver(inViewport);
const obsOptions = {};

// Attach observer to every [data-inviewport] element:
document.querySelectorAll('[data-inviewport]').forEach(el => {
  Obs.observe(el, obsOptions);
});

次に、「is-inViewport」クラスを使用して要素に CSS トランジションまたはアニメーションを追加し、ビューポートに表示されるときに要素をアニメーション化できます。例:

[data-inviewport] {
  width: 100px;
  height: 100px;
  background: #0bf;
  margin: 150vh 0;
}

/* inViewport */

[data-inviewport="scale-in"] {
  transition: 2s;
  transform: scale(0.1);
}
[data-inviewport="scale-in"].is-inViewport {
  transform: scale(1);
}

[data-inviewport="fade-rotate"] {
  transition: 2s;
  opacity: 0;
}
[data-inviewport="fade-rotate"].is-inViewport {
  transform: rotate(180deg);
  opacity: 1;
}

このコードでは、[data-inviewport] 属性を持つ要素に CSS トランジションが含まれます。ビューポートに入ると、アニメーションをトリガーするために is-inViewport クラスが追加されます。

以上がビューポート内にある要素のみをアニメーション化するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。