FLASH SALE! Up to 40% off on unlimited courses, tutorials and creative asset downloads SAVE NOW
Advertisement
  1. Web Design
  2. jQuery
Webdesign

小窍门:利用fullPage.js和Animation.css来实现“滚动”动画效果

by
Difficulty:IntermediateLength:ShortLanguages:

Chinese (Simplified) (中文(简体)) translation by Liyi (you can also view the original English article)

前边的一个教程中,我向大家介绍了一款流行的jQuery插件fullPage.js,它可以用来构建全屏网页(full-screen pages)。 在本节中,我将向大家展示:利用fullPage.js和animate.css,如何实现基于滚动的动画效果。

需要的js库

为这个例子,我特定制作了一个demo页面。 当你查看设置(Settings)标签下的内容时,你将看到我添加了下边的一些库。

file

Bootstrap库并不是必须的,它只是用来设置一些样式。

过程

我们的页面由四个部分组成,每一部分都填满页面(感谢fullPage)。 用户滚动鼠标,页面即会跳到下一个部分(section )。或者,通过右边的分页链接,也可实现导航。 每次当我们滚动或导航时,都会触发一些动画,比如:把图像带到某个位置。

file

在展示触发动画的代码之前,我们先来说明需要哪些步骤(来触发动画)。

  • 我们需要利用fullPage提供的“回调”函数。 在我们的例子中,更加具体地说,我们想要使第二、三、四部分实现动画效果,所以我们会使用onLeave回调函数。 如果我们想要使第一 部分“动起来”,我们可以使用回调函数afterLoad。 同样的方式,为了使slides动起来,我们应该使用afterSlideLoadonSlideLeave函数。
  • 利用jQuery,我们将动态地添加css动画(animate.css提供)。
  • 我们也将把动画按序应用到元素上,通过animate-delaycss属性来实现。

现在,让我们深入了解这些动画。

动画 #1

页面的第二部分包含三幅图像和一个按钮。 下边是它的结构。

你可以发现,我们已经把is-animatedis-animated__single这两个class添加到了我们想要应用动画的元素上。 另外,记住一点:拥有is-animatedclass的所有元素将共享同样的动画效果(比如,fadeInUpBig)。

触发这部分动画的jQuery代码类似下边这样:

在本例中,当我们离开第一部分,移动到第二部分时,我们应用了两种不同的动画(fadeInUpBigrollIn)到目标元素上。 除此之外,我们使用animation-delay这个CSS属性来规定动画开始的时间。

动画 #2

第三部分包含两幅图像和一个按钮。 下面,你可以看到相应的html代码:

就像前一个例子类似,我们添加了is-animatedis-animated__singleclass到目标元素。

相应的jQuery代码如下:

在这部分,我们使用fadeInRightBigfadeInLeftBig动画来顺序显示两幅图像。 此外,我们使用bounceInDown动画来展示按钮。

动画 #3

第四部分由三个元素组成:两个段落和一个按钮。 下面是它的结构:

你可以再次看到,我们把is-animatedis-animated__single这两个类添加到了目标元素上。

接下来,我们来看一看相关的jQuery代码:

这里,利用zoomIn动画,两个段落同时出现了。 而按钮这利用lightSpeedIn动画出现了。

接下来的代码还能帮助我们检测到动画什么时候结束:

在这个例子中,按钮只出现了几秒,然后我们利用之前提到的代码将它隐藏起来了。

下面你会看到嵌入式的Codepen例子(尽管full page demo更加有效果)

总结

在这个快速例子中,我们学到了一点:结合fullpage.js和animated.css这两个类库来构建基于滚动的动画。

如果你想要改进这个例子,可以从两个方面着手:

  • 只在大屏幕上开启这些动画。 为达到这个目标,请使用matchMedia方法。
  • 你可以在onLeave函数中写你的业务代码。
关注我们的公众号
Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.