CSS3 と IntersectionObserver API を使用して、ビューポート内にある要素のみをアニメーション化するにはどうすればよいですか?

ビューポートで要素をアニメーション化する

CSS3 では、HTML 要素にアニメーションを追加して、特定の条件が満たされたときに要素を移動したり、外観を変更したりできます。 。ただし、要素がビューポートに表示されている場合にのみこれらのアニメーションを再生したい場合は、IntersectionObserver API を使用できます。

IntersectionObserver API の使用

IntersectionObserver API要素とビューポートまたは祖先要素の交差を観察できます。要素が表示される (つまり、ビューポートと交差する) と、クラスの切り替えやアニメーションの実行などのアクションをトリガーできます。

IntersectionObserver を使用した実装例を次に示します。

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

const Obs = new IntersectionObserver(inViewport);
const obsOptions = {}; //See: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Intersection_observer_options

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

inViewport 関数では、要素がビューポートと交差しているかどうか (つまり、entry.isIntersecting) を確認し、ターゲット要素のクラス is-inViewport を切り替えます。

アニメーションのスタイルを設定するには、通常どおり CSS トランジションまたはキーフレームを使用できます。たとえば、次のように data-inviewport="scale-in" を使用して要素のアニメーションを定義できます。

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

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

この設定では、要素は次のように 10% から 100% にスケールされます。ビューポートに表示されます。

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