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

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

このクエリでは、グラフがオフに配置されているにもかかわらず、ページの読み込み時に棒グラフのアニメーションがアクティブになるという問題が発生します。画面。目標は、ビューアが下にスクロールしてチャートが表示されたときにのみアニメーションをトリガーすることです。

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

これを実現するには、JavaScript または jQuery を使用してスクロール イベントを監視し、要素がいつビューポートに入るかを決定します。検出されると、アニメーションを開始できます。

以下のコードでは、要素が表示されたときに JavaScript を使用して「start」クラスを要素に追加し、アニメーションをトリガーします。

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

.eighty.start {
    width: 0px;
    background: #aae0aa;
    animation: eighty 2s ease-out forwards;
}

function isElementInViewport(elem) {
    var scrollElem = ((navigator.userAgent.toLowerCase().indexOf('webkit') != -1) ? 'body' : 'html');
    var viewportTop = $(scrollElem).scrollTop();
    var viewportBottom = viewportTop + $(window).height();
    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 サイトの他の関連記事を参照してください。