结合滚动触发动画

在实际页面中，滚动加载是常见的交互模式。我们可以通过监听 scroll 事件，当元素进入视口时使用 Anime.js 播放动画，实现渐入、浮现、滑动等效果。

示例：元素进入视口后淡入浮现

html

<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8" />
  <title>滚动触发动画</title>
  <style>
    html,
    body {
      margin: 0;
      padding: 0;
      font-family: sans-serif;
      height: 100%;
      overflow: hidden;
    }

    .container {
      height: 500px;
      /* 控制整体 iframe 显示高度 */
      overflow-y: auto;
      background-color: #f5f5f5;
    }

    .spacer {
      height: 100vh;
      background: #eee;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .fade-in {
      opacity: 0;
      transform: translateY(30px);
      width: 200px;
      height: 100px;
      background-color: #4FC08D;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 20px;
      transition: opacity 0.3s;
    }
  </style>
</head>

<body>
  <div class="container" id="scrollable">
    <div class="spacer">下滑查看动画</div>
    <div class="spacer">
      <div class="fade-in">滚动我进来</div>
    </div>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
  <script>
    (function () {
      var container = document.getElementById('scrollable');
      if (!container.dataset.listenerAdded) {
        container.dataset.listenerAdded = 'true';
        container.addEventListener('scroll', function () {
          var el = container.querySelector('.fade-in');
          var rect = el.getBoundingClientRect();
          var containerRect = container.getBoundingClientRect();

          if (
            rect.top < containerRect.bottom - 100 &&
            !el.classList.contains('animated')
          ) {
            el.classList.add('animated');
            anime({
              targets: el,
              opacity: [0, 1],
              translateY: [30, 0],
              duration: 800,
              easing: 'easeOutCubic'
            });
          }
        });
      }
    })();
  </script>
</body>

</html>

小结

通过 scroll + Anime.js，你可以实现按需播放动画，避免资源浪费，同时提升首屏加载体验和页面动态感。

✅ 效果说明：

页面初始加载时 .fade-in 元素不可见；
滚动到该元素区域后触发动画：浮现 + 上移；
动画只触发一次，避免重复执行；
适合用于列表加载、区块滚动浮现等动态场景。

结合滚动触发动画

示例：元素进入视口后淡入浮现

小结

相关内容