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)标签下的内容时,你将看到我添加了下边的一些库。

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

在展示触发动画的代码之前,我们先来说明需要哪些步骤(来触发动画)。
- 我们需要利用fullPage提供的“回调”函数。 在我们的例子中,更加具体地说,我们想要使第二、三、四部分实现动画效果,所以我们会使用
onLeave
回调函数。 如果我们想要使第一 部分“动起来”,我们可以使用回调函数afterLoad
。 同样的方式,为了使slides动起来,我们应该使用afterSlideLoad
和onSlideLeave
函数。 - 利用jQuery,我们将动态地添加css动画(
animate.css
提供)。 - 我们也将把动画按序应用到元素上,通过
animate-delay
css属性来实现。
现在,让我们深入了解这些动画。
动画 #1
页面的第二部分包含三幅图像和一个按钮。 下边是它的结构。
<section class="section second"> <div class="container"> <div class="row"> <div class="col-sm-4 is-animated"> <img class="img-responsive" src="https://placeimg.com/300/350/nature"> </div> <div class="col-sm-4 is-animated"> <img class="img-responsive" src="https://placeimg.com/300/350/people"> </div> <div class="col-sm-4 is-animated"> <img class="img-responsive" src="https://placeimg.com/300/350/tech"> </div> <div class="col-xs-12 text-center is-animated__single"> <button type="button" class="btn btn-lg">A Simple Button</button> </div> </div><!--end of row--> </div><!--end of container--> </section>
你可以发现,我们已经把is-animated
和is-animated__single
这两个class添加到了我们想要应用动画的元素上。 另外,记住一点:拥有is-animated
class的所有元素将共享同样的动画效果(比如,fadeInUpBig
)。
触发这部分动画的jQuery代码类似下边这样:
var $isAnimatedSecond = $('.second .is-animated'), $isAnimatedSecondSingle = $('.second .is-animated__single'); /* this code is part of the onLeave callback */ if( index == 1 && nextIndex == 2 ) { $isAnimatedSecond.addClass('animated fadeInUpBig'); $isAnimatedSecond.eq(0).css('animation-delay', '.3s'); $isAnimatedSecond.eq(1).css('animation-delay', '.6s'); $isAnimatedSecond.eq(2).css('animation-delay', '.9s'); $isAnimatedSecondSingle.addClass('animated rollIn').css('animation-delay', '1.7s'); }
在本例中,当我们离开第一部分,移动到第二部分时,我们应用了两种不同的动画(fadeInUpBig
和rollIn
)到目标元素上。 除此之外,我们使用animation-delay
这个CSS属性来规定动画开始的时间。
动画 #2
第三部分包含两幅图像和一个按钮。 下面,你可以看到相应的html代码:
<section class="section third"> <div class="container"> <div class="row"> <div class="col-sm-3 col-sm-offset-3 is-animated"> <img class="img-responsive" src="https://placeimg.com/300/350/tech"> </div> <div class="col-sm-3 is-animated"> <img class="img-responsive" src="https://placeimg.com/300/350/any"> </div> <div class="col-xs-12 text-center is-animated__single"> <button type="button" class="btn btn-lg">A Simple Button</button> </div> </div><!--end of row--> </div><!--end of container--> </section>
就像前一个例子类似,我们添加了is-animated
和 is-animated__single
class到目标元素。
相应的jQuery代码如下:
var $isAnimatedThird = $('.third .is-animated'), $isAnimatedThirdSingle = $('.third .is-animated__single'); /* this code is part of the onLeave callback */ if( ( index == 1 || index == 2) && nextIndex == 3 ) { $isAnimatedThird.eq(0).addClass('animated fadeInRightBig').css('animation-delay', '.3s'); $isAnimatedThird.eq(1).addClass('animated fadeInLeftBig').css('animation-delay', '.6s'); $isAnimatedThirdSingle.addClass('animated bounceInDown').css('animation-delay', '1.2s'); }
在这部分,我们使用fadeInRightBig
和fadeInLeftBig
动画来顺序显示两幅图像。 此外,我们使用bounceInDown
动画来展示按钮。
动画 #3
第四部分由三个元素组成:两个段落和一个按钮。 下面是它的结构:
<section class="section fourth"> <div class="container"> <div class="row"> <div class="col-xs-12 is-animated"> <p>Some text here</p> </div> <div class="col-xs-12 is-animated"> <p>Some text here</p> </div> <div class="col-xs-12 text-center is-animated__single"> <button type="button" class="btn btn-lg">Thank You!</button> </div> </div><!--end of row--> </div><!--end of container--> </section>
你可以再次看到,我们把is-animated
和is-animated__single
这两个类添加到了目标元素上。
接下来,我们来看一看相关的jQuery代码:
var $isAnimatedFourth = $('.fourth .is-animated'), $isAnimatedFourthSingle = $('.fourth .is-animated__single'); /* this code is part of the onLeave callback */ if( ( index == 1 || index == 2 || index == 3 ) && nextIndex == 4 ) { $isAnimatedFourth.addClass('animated zoomIn').css('animation-delay', '.6s'); $isAnimatedFourthSingle.addClass('animated lightSpeedIn').css('animation-delay', '1.2s') $isAnimatedFourthSingle.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() { $(this).removeClass('lightSpeedIn').addClass('zoomOutDown'); }); }
这里,利用zoomIn
动画,两个段落同时出现了。 而按钮这利用lightSpeedIn
动画出现了。
接下来的代码还能帮助我们检测到动画什么时候结束:
$('#yourElement').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', doSomething);
在这个例子中,按钮只出现了几秒,然后我们利用之前提到的代码将它隐藏起来了。
下面你会看到嵌入式的Codepen例子(尽管full page demo更加有效果)
总结
在这个快速例子中,我们学到了一点:结合fullpage.js和animated.css这两个类库来构建基于滚动的动画。
如果你想要改进这个例子,可以从两个方面着手:
- 只在大屏幕上开启这些动画。 为达到这个目标,请使用
matchMedia
方法。 - 你可以在
onLeave
函数中写你的业务代码。
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Update me weeklyEnvato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post