WowJS:滚动页面时添加动画效果

WOW是animate.css的好朋友,一开始的时候动画效果并不会出现,只有当界面滚动的时候或者是当达到一定的值得时候才会出现动画效果。
WOW.js地址
animate.css地址
WOW demo地址

WOW.js要配合animate.css使用!!

引入wow.js：

简单示例：(必须设置为块状或者行内块状！)

用法介绍：
1、使元素显现

添加类`.wow`到HTML元素，它将不可见，直到用户滚动显示它。
 

     内容显示在这里

2、选择动画风格

在Animate.css中选择动画样式，然后将CSS类添加到HTML元素。
 

    内容显示在这里

示例二:

    
    
    
    
    
    



    
1
    
2

高级设置

data-wow-duration：更改动画持续时间
data-wow-delay：动画开始之前的延迟
data-wow-iteration：动画的次数重复
data-wow-offset：开始动画的距离（与浏览器底部相关）

    
1
    
2

这里指的开始动画的距离是与浏览器底部的距离,一开始的时候动画没有出现。

$(function(){
       //1.初始化
       new WOW().init();
        //2.监听页面滚动
        var vheight= 0, vscroll= 0, voffset=0,vDataWowOffset=0;
       $(window).on('scroll',function(){
//               console.log('滚动了');
               //2.1求出可视区域的高度
               vheight=$(window).height();
//               console.log(vheight);
               //2.2求出滚动的距离
               vscroll=$(window).scrollTop();
//               console.log(vscroll);
               //2.3求出当前元素的offsetTop
               voffset=$('#test').offset().top;
//               console.log(voffset);
               //2.4求出offset
               vDataWowOffset=vscroll+vheight-voffset;
               console.log(vDataWowOffset);
           })
        })

图示.png

自定义设置

• boxClass：用户滚动时显示隐藏框的类名。
• animateClass：触发CSS动画的类名（animate.css库默认为“animated”）
• 偏移量：定义浏览器视口底部和隐藏框顶部之间的距离。 当用户
  滚动并到达这个距离时，隐藏的框被显示出来。
• 手机：在移动设备上打开/关闭WOW.js。
• 活着：检查页面上新的WOW元素。

$(function(){
 //1.初始化
 // new WOW().init();
var wow=new WOW({
boxClass:"wow",//动画元素的CSS类（默认类名wow）
animateClass:'animated',// 动画CSS类 （默认类名animated）
offset:0,
mobile:true// 是否在移动设备上执行动画 （默认是true）
 })

wow.init()
 })

他有个不好的地方就是动画只能做一次,做完这一次,下次即使在达到这个条件他就不会再做了,除非重新刷新页面.
有一个框架可以实现来回都可以实现动画效果,就是scrollReveal

各种class类名的动画效果：

wow rollIn	从左到右、顺时针滚动、透明度从100%变化至设定值
wow bounceIn	从原位置出现，由小变大超出设定值，再变小小于设定值，再回归设定值、透明度从100%变化至设定值
wow bounceInUp	从下往上、窜上来以后会向上超出一部分然后弹回去、透明度为设定值不变
wow bounceInDown	从上往下、掉下来以后会向下超出一部分然后弹跳一下、透明度为设定值不变
wow bounceInLeft	从左往右、移过来以后会向右超出一部分然后往左弹一下、透明度为设定值不变
wow bounceInRight	从右往左、移过来以后会向左超出一部分然后往右弹一下、透明度为设定值不
wow slideInUp	从下往上、上来后固定到设定位置、透明度为设定值不变（up是从下往上）（如果元素在最下面，会撑开盒子高度）
wow slideInDown	从上往下、上来后固定到设定位置、透明度为设定值不变
wow slideInLeft	从左往右、上来后固定到设定位置、透明度为设定值不变（left却是从左往右）
wow slideInRight	从右往左、上来后固定到设定位置、透明度为设定值不变
wow lightSpeedIn	从右往左、头部先向右倾斜，又向左倾斜，最后变为原来的形状、透明度从100%变化至设定值
wow pulse	原位置放大一点点在缩小至原本大小、透明度为设定值不变（配合动画执行次数属性效果更佳）
wow flipInX	原位置后仰前栽、透明度从100%变化至设定值
wow flipInY	原位置左右旋动、透明度从100%变化至设定值
wow bounce	上下抖动、透明度为设定值不变（配合动画执行次数和动画持续时间属性可以实现剧烈抖动亦或是慢慢抖）
wow shake	左右抖动、透明度为设定值不变（配合动画执行次数和动画持续时间属性可以实现剧烈抖动亦或是慢慢抖）
wow swing	从右往左、头部先向右倾斜，又向左倾斜，最后变为原来的形状、透明度为设定值不变
wow bounceInU	原位置不变、直接从不显示到显示（无过过渡效果）
wow wobble	原位置不变、类似于一个人站在那左右晃头、透明度为设定值不变

参考地址1：https://www.jianshu.com/p/19e70670b218
参考地址2：https://www.cnblogs.com/yangjunfei/p/6746926.html