页面滚动动画JQ插件 aniview 和 wow_wow data-animation-duration-CSDN博客

本文链接：https://blog.csdn.net/ljxyaly/article/details/84380566

两者的些对比：

都是基于animate.css

Animate.cssdaneden.github.io

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

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

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

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

用法：

<div class="aniview" av-animation="zoomIn"></div>

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

用法：

<div class="wow zoomIn"></div>

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

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

如：

<div class="wow zoomIn" data-wow-duration="3s" data-wow-delay="1s" data-wow-delay="100" data-wow-iteration="infinite"></div>

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

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