前端开发页面加载动画插件 aniview 和 wow

今天分享两款在前端开发中非常常见的页面加载动画插件aniview.js和wow.js，都是依赖animate.css动画库进行开发，用于设置用户滚动页面时触发各种CSS动画。前者基于jQuery，后者则是原生JS。

wow.js用法

WOW.js远程CDN加速地址

<script src="https://cdn.bootcdn.net/ajax/libs/wow/1.1.2/wow.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/wow/1.1.2/wow.min.js"></script>

<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>

这个具体可以参考演示animate.css官网的效果：animate.style

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"

aniview.js用法

首先引入jquery.js、aniview.js和animate.css，jquery必须在aniview前面加载。

<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。

animate.css介绍

animate.css官网：https://animate.style/

雪花测评，只分享前端干货，不玩任何套路。喜欢学习交流的同学也可以加下方Q群。