fullPage.js翻页动画效果及重置

【前言】

之前总结过了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');
          }
}

fullPage.js翻页动画效果及重置

猜你喜欢