页面滚动动画JQ插件 aniview 和 wow

两者的些对比：

都是基于animate.css

Animate.css​daneden.github.io

aniview: 基于jq，压缩版版1.09kb

wow: 不基于jq，压缩版8.21kb，可执行重复动画，可设置在mobile下是否显示动画

 

第一种： aniview（没看到网址）

基于 animate.css 和 jq , aniview.min.js 大小为1.09kb

用法：

av-animation为动画名称，从animate.css中选取，同时还加上自定义的动画速率类如：

.aniview-fast {
  animation-duration: 1s;
  animation-delay: 0s;
}

.aniview-slow {
  animation-duration: 2s;
  animation-delay: 0.5s;
}

.aniview-reallyslow {
  animation-duration: 3s;
  animation-delay: 1s;
}

接下来就是js的初始化

const options = {
  animateThreshold: 100,
  scrollPollInterval: 50
};

$('.aniview').AniView(options);

animateThreshold 正数值表示元素进入视口指定的像素值之后才会触发动画序列，负数值表示在元素进入视口之前多少像素就触发动画序列，默认值为0

scrollPollInterval 测试用户滚动的频率，单位毫秒，这是jQuery内置的”scroll”事件的延伸，默认值为20

 

第二种： wow

基于 animate.css , wow.min.js 大小为8.21kb

用法： 

同时还可在上配置一些属性（其中表示时间需要加上s单位，其他不用）：

• data-wow-duration： 持续时间
• data-wow-delay： 延迟时间
• data-wow-offset： 距离浏览器底部多远时开始执行动画
• data-wow-iteration： 重复次数，设为infinite表示无限重复

如：

接下来是js的初始化和配置项

const wow = new WOW(
   {
       boxClass:     "wow",      
       animateClass: "animated", 
       offset:       0,          
       mobile:       true,      
       live:         true       
   }
 )
 wow.init();

• boxClass：动画元素的标记类，默认值为"wow"
• animateClass：触发CSS动画的类名（animate.css库默认为"animated"）
• offset：距离浏览器底部多远时开始执行动画，当与data-wow-offset同时出现时，以data-wow-offset为准（没想到），默认值为"0"
• mobile： 是否在移动设备上显示动画，默认值为"true"
• live： 是否持续检查页面中是否有用于wow动画样式的元素，默认值为"true"

 

OK!