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

スクロール時に CSS3 アニメーションをトリガーする

問題:

コンテンツがスクロールして表示される前にアニメーション化された棒グラフが読み込まれるため、逃したアニメーション。

解決策:

スクロールして表示されるときに CSS3 アニメーションをアクティブにするには:

1.スクロール イベントのキャプチャ

スクロール イベントを監視する JavaScript または jQuery イベント リスナーを実装します。

2.要素の可視性を確認します

各スクロール イベントについて、要素 (棒グラフ) がユーザーのビューポートに表示されているかどうかを確認します。

3.アニメーションの開始

要素が表示されたら (例: isElementInViewport()) が true を返したとき)、適切な CSS クラス (例: "start") を適用してアニメーションを開始します。 .

例コード:

<!-- HTML -->
<div class="bar">
    <div class="level eighty">80%</div>
</div>

<!-- CSS -->
.eighty.start {
    width: 0px;
    background: #aae0aa;
    -webkit-animation: eighty 2s ease-out forwards;
       -moz-animation: eighty 2s ease-out forwards;
        -ms-animation: eighty 2s ease-out forwards;
         -o-animation: eighty 2s ease-out forwards;
            animation: eighty 2s ease-out forwards;
}

<!-- jQuery -->
function isElementInViewport(elem) {
    // Calculate element and viewport positions
    // ...

    return ((elemTop < viewportBottom) && (elemBottom > viewportTop));
}

function checkAnimation() {
    $elem = $('.bar .level');

    // Prevent redundant animation start
    if ($elem.hasClass('start')) return;

    if (isElementInViewport($elem)) {
        // Start the animation
        $elem.addClass('start');
    }
}

$(window).scroll(function(){
    checkAnimation();
});

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