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

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

要素の位置がビューポートを超えると、その要素はビューから非表示になります。パフォーマンスを最適化するために、CSS3 アニメーションは、要素がビューポート内に表示されたときにのみ開始できます。これは、ページのはるか下に配置され、その上に実質的なコンテンツがある要素の場合に特に便利です。

これを実現するには、JavaScript または jQuery を利用してスクロール イベントをキャプチャします。スクロール イベントがトリガーされると、コードは対象の要素がビューポートにスクロールしたかどうかをチェックします。その場合、指示クラスが要素に追加され、アニメーションの開始を促します。

コード実装:

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);

    // Scroll position
    var viewportTop = $(window).scrollTop();
    var viewportBottom = viewportTop + $(window).height();

    // Element position
    var elemTop = $elem.offset().top;
    var elemBottom = elemTop + $elem.height();

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

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

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

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

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