今天分享两款在前端开发中非常常见的页面加载动画插件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/
动画 | 说明 |
---|---|
bounce | 弹跳 |
flash | 闪烁 |
pulse | 放大,缩小 |
rubberBand | 放大,缩小,弹簧 |
shake | 左右晃动 |
headShake | 左右小幅晃动 |
swing | 左右扇形摇摆 |
tada | 放大,左右上下晃动,缩小 |
wobble | 左右小幅(圆点较远)扇形摇摆 |
jello | 左右左右上下晃动 |
bounceIn | 重复放大缩小 |
bounceInDown | 从上到下出现,弹簧 |
bounceInLeft | 从左到右出现,弹簧 |
bounceInRight | 从右到左出现,弹簧 |
bounceInUp | 从下到上出现,弹簧 |
bounceOut | 从常规到小消失,弹簧 |
bounceOutDown | 从常规到小,从下方消失,弹簧 |
bounceOutLeft | 从常规到小,从左方消失,弹簧 |
bounceOutRight | 从常规到小,从右方消失,弹簧 |
bounceOutUp | 从常规到小,从上方消失,弹簧 fadeIn 渐现 |
fadeInDown | 渐现,从上到下 |
fadeInDownBig | 渐现,从上到下,滑动距离较长 |
fadeInLeft | 渐现,从左到右 |
fadeInLeftBig | 渐现,从左到右,滑动距离较长 |
fadeInRight | 渐现,从右到左 |
fadeInRightBig | 渐现,从右到左,滑动距离较长 |
fadeInUp | 渐现,从下到上 |
fadeInUpBig | 渐现,从下到上,滑动距离较长 |
fadeOut | 渐隐 |
fadeOutDown | 渐隐,从上到下 |
fadeOutDownBig | 渐隐,从上到下,滑动距离较长 |
fadeOutLeft | 渐隐,从左到右 |
fadeOutLeftBig | 渐隐,从左到右,滑动距离较长 |
fadeOutRight | 渐隐,从右到左 |
fadeOutRightBig | 渐隐,从右到左,滑动距离较长 |
fadeOutUp | 渐隐,从下到上 |
fadeOutUpBig | 渐隐,从下到上,滑动距离较长 |
flip | 中心Y轴旋转,放大,缩小 |
. flipInX | 元素中心X轴旋转 |
flipInY | 元素中心Y轴旋转 |
flipOutX | 中心X轴旋转,消失 |
flipOutY | 中心Y轴旋转,消失 |
lightSpeedIn | 从右到左,平行四边形,左上角突出进入 |
lightSpeedOut | 从左到右,平行四边形,左上角突出进入 |
rotateIn | 元素中心顺时针旋转进入 |
rotateInDownLeft | 元素左外长半径顺时针旋转进入 |
rotateInDownRight | 元素右外长半径逆时针旋转进入 |
rotateInUpLeft | 元素左外长半径逆时针旋转进入 |
rotateInUpRight | 元素右外长半径顺时针旋转进入 |
rotateOut | 元素中心顺时针旋转消失 |
rotateOutDownLeft | 元素左外长半径顺时针旋转消失 |
rotateOutDownRight | 元素右外长半径逆时针旋转消失 |
rotateOutUpLeft | 元素左外长半径逆时针旋转消失 |
rotateOutUpRight | 元素右外长半径顺时针旋转消失 |
hinge | 从右上到坐下,顺时针旋转,从上到下消失 |
rollIn | 元素左外长半径顺时针旋转,平滑进入 |
rollOut | 元素右外长半径顺时针旋转,平滑进入 |
zoomIn | 元素由小变大进入 |
zoomInDown | 元素由小变大,从上方进入 |
zoomInLeft | 元素由小变大,从左方进入 |
zoomInRight | 元素由小变大,从右方进入 |
zoomInUp | 元素由小变大,从下方进入 |
zoomOut | 元素由大变小,消失 |
zoomOutDown | 元素由大变小,从下方消失 |
zoomOutLeft | 元素由大变小,从左方消失 |
zoomOutRight | 元素由大变小,从右方消失 |
zoomOutUp | 元素由大变小,从上方消失 |
slideInDown | 元素从上到下,平滑进入 |
slideInLeft | 元素从左到右,平滑进入 |
slideInRight | 元素从右到左,平滑进入 |
slideInUp | 元素从下到上,平滑进入 |
slideOutDown | 元素从上到下,平滑消失 |
slideOutLeft | 元素从右到左,平滑消失 |
slideOutRight | 元素从左到右,平滑消失 |
slideOutUp | 元素从下到上,平滑消失 |
雪花测评,只分享前端干货,不玩任何套路。喜欢学习交流的同学也可以加下方Q群。