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

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

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

IntersectionObserver API

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

実装例

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

<br>const inViewport = (エントリ、オブザーバー) => {<br> events.forEach(entry => {</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><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 で定義されたアニメーションがトリガーされます。

[data-inviewport="scale-in"] { 
 トランジション: 2 秒;
 トランスフォーム:スケール(0.1);
}
[data-inviewport="スケールイン"].is-inViewport { 
 変換: スケール(1);
}

[データ-inviewport="fade-rotate"] { 
 遷移: 2s;
 不透明度: 0;
}
[data-inviewport="fade-rotate"].is-inViewport { 
 変換: 回転(180 度);
 不透明度: 1;
}
< ;/pre>
このソリューションにより、スクロール中に要素が表示された場合にのみアニメーションが再生されるようになり、アニメーションが改善されます。ユーザーエクスペリエンスを向上させ、より視覚的に魅力的な Web ページを作成します。
以上がページのスクロール中に要素がビューポートに入ったときに CSS アニメーションをトリガーするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。