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

ページのスクロール中にビューポートに表示される要素をアニメーション化する

Web ページで CSS アニメーションを使用する場合、すべてのアニメーションが同時に再生され、アニメーションが見えにくくなる状況がよく発生します。一番下。この問題に対処するために、IntersectionObserver API を使用した解決策を検討します。

IntersectionObserver API

IntersectionObserver API を使用すると、開発者は要素の交差部分の変更を監視できます。その親コン​​テナまたはビューポート。要素が表示されると、アクションの開始に使用できるイベントがトリガーされます。

実装例

次の場合に CSS クラスの切り替えをトリガーする例です。要素が表示されます。ビューポート:

<br>const inViewport = (エントリ、オブザーバー) => {<br> events.forEach(entry => {<pre class="brush:php;toolbar:false">entry.target.classList.toggle("is-inViewport", entry.isIntersecting);

});
};

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

// すべての [data-inviewport] 要素にオブザーバーをアタッチします:
ドキュメント.querySelectorAll('[データインビューポート]').forEach(el => {
Obs.observe(el, obsOptions);
});

上記の例では、[data-inviewport] 属性を持つすべての要素は次のようになります。監視されています。要素がビュー内にあるとき、is-inViewport クラスが追加され、以下の CSS で定義されたアニメーションがトリガーされます。

<br>[data-inviewport="scale-in"] { <br> トランジション: 2 秒;<br> トランスフォーム:スケール(0.1);<br>}<br>[data-inviewport="スケールイン"].is-inViewport { <br> 変換: スケール(1);<br>}<p>[データ-inviewport="fade-rotate"] { <br> 遷移: 2s;<br> 不透明度: 0;<br>}<br>[data-inviewport="fade-rotate"].is-inViewport { <br> 変換: 回転(180 度);<br> 不透明度: 1;<br>}<br>&lt ;/pre></p><p>このソリューションにより、スクロール中に要素が表示された場合にのみアニメーションが再生されるようになり、アニメーションが改善されます。ユーザーエクスペリエンスを向上させ、より視覚的に魅力的な Web ページを作成します。</p>

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