【前言】
之前总结过了fullPage.js的用法,但全屏翻滚经常配合绚丽的动画才显得有品位一些,所以接下来总结下fullPage翻页的动画效果
有的页面向下滚动的时候,有点元素会产生一些动画效果,这些动画多数是通过css3来实现的,而由于是用css3的,所以Ie8以下的浏览器多数不支持,这时我们可以写hack,或者直接忽略这些浏览器
可以利用fullPage.js和Animation.css来实现“滚动”动画效果,也就是用CSS3执行动画。除此之外还有另外一种方法即jQuery animate()动画,这个我在后面文章再做介绍
【正文】
接下来讲解下,利用fullPage.js和animate.css,如何实现基于滚动的动画效果
我们的页面由三个部分组成,每一部分都填满页面(感谢fullPage)。 用户滚动鼠标,页面即会跳到下一个部分(section )。或者,通过右边的分页链接,也可实现导航。 每次当我们滚动或导航时,都会触发一些动画,比如:把图像带到某个位置
【一】先来说明需要哪些步骤来触发动画
需要利用fullPage提供的回调函数
在我们的例子中,更加具体地说,我们想要使第二、三部分实现动画效果,所以我们会使用onLeave回调函数。 如果我们想要使第一 部分“动起来”,我们可以使用回调函数afterLoad。 同样的方式,为了使slides动起来,我们应该使用afterSlideLoad和onSlideLeave函数。
利用jQuery,我们将动态地添加css动画(animate.css提供),我们也将把动画按序应用到元素上,通过animate-delay css属性来实现
【回调函数列表】
(1)afterRender(渲染完成后)
页面结构生成后的回调函数,或者说页面初始化完成后的回调函数--->常用于第一页
(2)onLeave(离开前)
滚动前的回调函数,可以理解为--->离开某个页面前的函数
接收 index、nextIndex 和 direction 3个参数:
①. index 是离开的“页面”的序号,从1开始计算;
②. nextIndex 是滚动到的“页面”的序号,从1开始计算;
③. direction 判断往上滚动还是往下滚动,值是 up 或 down
(3)afterLoad(加载后)
滚动到某一屏后的回调函数,可以理解为--->到达某个页面时执行的函数
接收 anchorLink 和 index 两个参数:anchorLink 是锚链接的名称,index 是序号,从1开始计算
(4)afterSlideLoad(载入幻灯片后)
滚动到某一水平滑块后的回调函数,可以理解为--->到达某个页面的幻灯片时执行的函数
与 afterLoad 类似,接收 anchorLink、index、slideIndex、direction 4个参数
(5)onSlideLeave(离开幻灯片前)
某一水平滑块滚动前的回调函数,可以理解为--->离开某个页面的幻灯片时执行的函数
与 onLeave 类似,接收 anchorLink、index、slideIndex、direction 4个参数
【二】下面根据案例来按照步骤做出动画
(1)基本架构
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>案例讲解</title> <link rel="stylesheet" type="text/css" href="css/jquery.fullPage.css"> <link rel="stylesheet" type="text/css" href="css/animate.css"> <style type="text/css"> .one{width: 100px;height: 100px;background-color: #00bcd4;display: inline-block; border-radius: 100%} </style> </head> <body> <div id="main_body"> <div class="section"> <div class="one one1"></div> <div class="one one2"></div> <div class="one one3"></div> </div> <div class="section"> <div class="slides slides1">1</div> <div class="slides slides2">2</div> <div class="slides slides3">3</div> </div> <div class="section">第三屏</div> </div> <script src="../js/jquery-1.8.3.min.js"></script> <script src="../js/jquery.fullPage.min.js"></script> <script src="../js/jquery.fullPage.js"></script> <script> $(function(){ $("#main_body").fullpage({ sectionsColor:['red','green','yellow'] }); }) </script> </body> </html>(2)接下来先添加加载完成后首页的动画,这时用到 afterRender( 页面初次加载完成后的回调函数)
afterRender:function(){//页面初次加载完成后的回调函数 $(".one1").addClass('animated bounceInDown'); $(".one2").addClass('animated lightSpeedIn '); $(".one3").addClass('animated wobble'); }
(3)之后添加滚动到某一屏时的动画,这时用到afterLoad(滚动到某一屏后的回调函数)
afterLoad:function(anchorLink,index){//滚动到某一屏后的回调函数 if(index == 2){ $(".slides1").addClass('animated flipInX'); $(".slides2").addClass('animated flipInY'); $(".slides3").addClass('animated flipInX'); } }综上,滚屏时便可以触发动画效果了
【三】重置每页动画效果
使用fullpage.js和animate.css制作动画的朋友一定会有这样的问题,页面来回滚动时,动画只能执行一遍。
比如:当加载完第二页的动画后,再翻到第二页就不会在出现动画,因为CSS已经含有该属性也达到效果。如此一来我们想要重复载入动画的话必须先重置CSS属性。
(1)通俗的办法:
afterLoad:function(anchorLink,index){//滚动到某一屏后的回调函数 if(index == 2){ $(".slides1").addClass('animated flipInX'); $(".slides2").addClass('animated flipInY'); $(".slides3").addClass('animated flipInX'); setTimeout(function(){ $(".slides1").removeClass('flipInX'); $(".slides2").removeClass('flipInY'); $(".slides3").removeClass('flipInX'); },1000); } }即利用setTimeout(定时作用),在动画执行完毕后的短时间里去除动画属性。
但该方法有缺点:动画时长与去除属性时长,难以严格控制
(2)使用fullPage.js提供的onLeave(滚动前/离开前的回调函数)
onLeave:function(index,nextIndex,direction){//滚动前的回调函数/离开前的 if(index == 2){ $(".slides1").removeClass('flipInX'); $(".slides2").removeClass('flipInY'); $(".slides3").removeClass('flipInX'); } }
.