要素がビューにスクロールしたときにのみ CSS3 アニメーションをトリガーするにはどうすればよいですか?

ビューへのスクロール時に CSS3 アニメーションをトリガー

目的: ユーザーのビューにスクロールされたときに要素の CSS3 アニメーションをアクティブ化します。

問題: 圧倒的なアニメーション化された棒グラフを画面外に押し出すコンテンツでは、ページの読み込み時にアニメーションが途中で開始されます。

解決策: JavaScript または jQuery を使用してスクロールを監視します。 events.

実装:

1. スクロール イベントのキャプチャ: JavaScript または jQuery を使用してスクロール イベントをキャプチャし、アニメーションがトリガーされるだけであることを確認します。ターゲット要素がビューポート内にある場合。
2. チェック要素の可視性: スクロール イベント リスナー内で、isElementInViewport() のような関数が、アニメーション化された要素がユーザーのビューに入ったかどうかを判断します。
3. アニメーションの開始: 要素が表示されると、をトリガーするクラス (例: "start") を追加します。アニメーション。

例:

この例では、jQuery を使用してスクロール イベントを処理し、棒グラフが表示される時期を識別します:

$(window).scroll(function() {
    var $elem = $('.bar .level');

    if (!$elem.hasClass('start') && isElementInViewport($elem)) {
        $elem.addClass('start');
    }
});

この JavaScript コードにより、ユーザーが下にスクロールしてグラフが表示されたときにのみ棒グラフのアニメーションが開始されるようになります。ビューポート。

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