ページスクロール時にビューポートに入ったときにのみ要素をアニメーション化するにはどうすればよいですか?

ページ スクロール時のビューポート内の要素のアニメーション化

複数のアニメーション要素がある Web ページでは、これらのアニメーションの開始タイミングを制御するのが難しい場合があります。スムーズなスクロール アニメーションを実現するには、それぞれの要素が表示されたときにのみアニメーションをトリガーする方法が必要です。 IntersectionObserver API を使用してこれを実現する方法は次のとおりです。

IntersectionObserver API の使用

IntersectionObserver API は、ビューポートまたは指定された親要素に関連する要素の可視性を監視します。これを使用して、要素が表示されるときに CSS アニメーションを切り替えることができます。

コード スニペット

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);
});

CSS アニメーションの例

要素にアニメーションを適用する方法の例を次に示します。

[data-inviewport] { /* THIS DEMO ONLY */
  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;
}

結論

IntersectionObserver API を活用することで、アニメーションのタイミングを制御できるようになり、対応する要素がビューポートに表示されたときに確実にアニメーションが再生されるようになりました。このアプローチにより、ユーザーが Web ページをスクロールする際に、シームレスで魅力的なエクスペリエンスが提供されます。

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