如何仅在滚动到元素时应用animation .css效果

Question

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

Answer 1

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

jQuery中基本的Waypoint函数是这样的:

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

'offset'值决定动画在什么点被触发。下面是设置和使用路径点的指南。

Answer 2

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

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

在这里得到它。阅读完整的文档。