ビューへのスクロール時に CSS3 アニメーションをトリガーするにはどうすればよいですか?

コンテンツがビューにスクロールするときに CSS3 アニメーションをアクティブにする方法

問題

棒グラフに生命を吹き込むために CSS3 アニメーションを使用していますが、ページが読み込まれた瞬間にアニメーションが開始されます。棒グラフは先行するコンテンツによって画面外に配置されるため、ユーザーが下にスクロールして表示するまでにアニメーションは完了します。

解決策: スクロール イベントをキャプチャする

鍵はキャプチャにあります。 JavaScript または jQuery を使用してイベントをスクロールします。スクロールするたびに、コードは棒グラフ要素がビューポート内にあるかどうかをチェックします。要素の可視性を検出すると、アニメーションを開始する「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) {
    var $elem = $(elem);

    // Get scroll position
    var viewportTop = $(scrollElem).scrollTop();
    var viewportBottom = viewportTop + $(window).height();

    // Get element position
    var elemTop = Math.round( $elem.offset().top );
    var elemBottom = elemTop + $elem.height();

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

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

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

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

// Capture scroll events
$(window).scroll(function(){
    checkAnimation();
});

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