首頁 > web前端 > css教學 > 如何在不使用 jQuery 的情況下使用 JavaScript 在滾動上觸發 CSS 動畫?

如何在不使用 jQuery 的情況下使用 JavaScript 在滾動上觸發 CSS 動畫?

Barbara Streisand
發布: 2024-12-10 22:41:10
原創
482 人瀏覽過

How Can I Trigger CSS Animations with JavaScript on Scroll Without jQuery?

在沒有 jQuery 的 JavaScript 中觸發 CSS 動畫

問題:

您想要在使用者捲動時觸發 CSS動畫頁面但沒有使用jQuery.

解決方案:

在 JavaScript 中觸發 CSS 動畫的一種方法是使用 classList 屬性。操作方法如下:

  1. 使用動畫屬性來建立一個 CSS 類別。

    例如:

    .animated {
      animation: my-animation 2s forwards;
    }
    登入後複製
  2. 新增事件監聽器document.

    新增事件監聽器document.

    document.addEventListener('scroll', (event) => {
      // Get the element you want to animate.
      const element = document.getElementById('my-element');
    
      // Add the 'animated' class to the element.
      element.classList.add('animated');
    });
    登入後複製
  3. 每頁滾動時都會觸發滾動事件。您可以使用此事件來觸發動畫。具體方法如下:
  4. 動畫完成時移除 'animated' 類別。

    element.addEventListener('animationend', (event) => {
      // Remove the 'animated' class from the element.
      element.classList.remove('animated');
    });
    登入後複製
  5. 可以使用animationend 事件來偵測當動畫結束時。操作方法如下:

範例:

<!DOCTYPE html>
<html>
<head>
  <style>
    .animated {
      animation: my-animation 2s forwards;
    }

    @keyframes my-animation {
      0% {
        opacity: 0;
      }

      100% {
        opacity: 1;
      }
    }
  </style>
</head>
<body>
  <div>
登入後複製
以下是如何在使用者捲動頁面時觸發CSS 動畫的完整範例:

以上是如何在不使用 jQuery 的情況下使用 JavaScript 在滾動上觸發 CSS 動畫?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板