如何僅在元素滾動到視圖中時觸發 CSS3 動畫？

捲動到視圖時觸發 CSS3 動畫

目標：當元素捲動到使用者視圖時啟動元素上的 CSS3 動畫。

問題：由於大量內容推動動畫條形圖離屏，頁面加載時其動畫會提前開始。

解決方案：利用 JavaScript 或 jQuery 監聽滾動事件。

實作：

1. 捕捉捲軸事件： 使用JavaScript 或jQuery 擷取捲動事件，確保僅當目標元素位於視窗內時觸發動畫。
2. 檢查元素可見性： 捲動事件監聽器內部，像 isElementInViewport() 這樣的函數決定動畫元素是否已經進入使用者的視圖。
3. 開始動畫：元素可見後，加入一個類別（例如「start」）來觸發動畫。

範例：

中在這個例子中，jQuery 用於處理滾動事件並識別條形圖何時可見：

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

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

This JavaScript 程式碼確保長條圖的動畫僅在使用者向下捲動且圖表在視窗中可見時才開始。

以上是如何僅在元素滾動到視圖中時觸發 CSS3 動畫？的詳細內容。更多資訊請關注PHP中文網其他相關文章！