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

 

 

 

 

 

 

 

.

你可能感兴趣的:(CSS,前端插件,常见特效)