首页 >web前端 >css教程 >如何在不使用 jQuery 的情况下使用 JavaScript 在滚动上触发 CSS 动画?

如何在不使用 jQuery 的情况下使用 JavaScript 在滚动上触发 CSS 动画?

Barbara Streisand
Barbara Streisand原创
2024-12-10 22:41:10483浏览

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.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. 动画完成时移除 'animated' 类。

    可以使用animationend 事件来检测当动画结束时。操作方法如下:

    element.addEventListener('animationend', (event) => {
      // Remove the 'animated' class from the element.
      element.classList.remove('animated');
    });

示例:

以下是如何在用户滚动页面时触发 CSS 动画的完整示例:

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

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

      100% {
        opacity: 1;
      }
    }
  </style>
</head>
<body>
  <div>

以上是如何在不使用 jQuery 的情况下使用 JavaScript 在滚动上触发 CSS 动画?的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn