如何仅在滚动到元素时才对元素应用 Animate.css 效果？

Question

我正在使用 animate.css 库在我的网站上应用动画效果。但问题是效果会在页面加载后立即应用。当我滚动到元素时，效果已经应用。 如何设置仅在滚动时出现元素时才应用效果？

Answer 1

您可以使用 Waypoints – 一个 javascript 库，它允许您在滚动到某个元素时执行一个函数。

jQuery 中的基本 Waypoint 函数如下所示：

$("#element-to-animate").waypoint(function() {
    // animation code
  }
}, { offset: '100%'});

'offset' 值决定了动画被触发的时间点。 Here 是设置和使用 waypoints 的指南。

Answer 2

您需要添加 wow.js 并应用它。当您向下滚动到底部时，这将起作用。 要使用它，请在头部添加 wow.js 并在动画元素中添加 wow class。

<div class="FadeIn wow">
  ------
</div>

Get it Here。并阅读完整的文档。