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）基本架构

    
    
    
    
    



    

        

        

        

    
    

        
1
        
2
        
3
    
    
第三屏

 （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');
          }
}

 

 

 

 

 

 

 

.