如何僅在元素滾動到視圖中時啟動 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中文網其他相關文章！