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

【问题标题】：How to apply Animate.css effect to the element ONLY when scrolled to it?如何仅在滚动到元素时将 Animate.css 效果应用于元素？
【发布时间】：2015-09-20 09:05:35
【问题描述】：

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

【问题讨论】：

标签： javascript css effects animate.css

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：