快速提示：使用fullPage.js和Animate.css滚动动画

在上一教程中 ，我向您介绍了fullPage.js ，这是一个流行的jQuery插件，用于构建全屏页面。 在此快速提示中，我将向您展示如何使用fullPage.js和animate.css创建基于滚动的动画。

所需的图书馆

出于本示例的目的，我设置了一个演示页面 。 如果您在“ 设置”标签下查看，您会看到我在笔中包含了以下库：

• fullPage.js
• animate.css
• jQuery的
• 引导程序

Bootstrap框架并不重要。 我添加它只是因为我想利用它的样式。

流程

我们的页面包括四个部分： 每个人都填满整个页面（感谢fullPage）。 用户将通过滚动或通过右侧的分页链接导航到下一部分。 每次发生这种情况时，我们都会触发一些动画，例如将图像放置到适当位置。

在显示触发动画的代码之前，让我们首先介绍所需的步骤：

• 我们需要利用fullPage提供的“回调”功能。 更具体地说，在我们的案例中，我们想为第二，第三和第四部分设置动画，因此我们将使用onLeave回调。 如果要为第一部分制作动画，则可以使用afterLoad回调。 以相同的方式，为动画幻灯片设置动画，我们应该使用afterSlideLoad和onSlideLeave函数。
• 我们将使用jQuery动态添加animate.css库提供CSS动画。
• 我们还将使用animate-delay CSS属性按顺序对元素进行animate-delay 。

现在，让我们深入了解动画！

动画＃1

页面的第二部分包括三幅图像和一个按钮。 这是它的结构：