两者的些对比:
都是基于animate.css
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();
- boxClass:动画元素的标记类,默认值为"wow"
- animateClass:触发CSS动画的类名(animate.css库默认为"animated")
- offset:距离浏览器底部多远时开始执行动画,当与data-wow-offset同时出现时,以data-wow-offset为准(没想到),默认值为"0"
- mobile: 是否在移动设备上显示动画,默认值为"true"
- live: 是否持续检查页面中是否有用于wow动画样式的元素,默认值为"true"
OK!