基于animate.css的插件库wow.js学习记录

昨天学习了一个超级实用简单的动画库animate.css

往期回顾 - - ：
今天继续学习一个基于animata.css的动画类库wow.js
官方网址：https://www.delac.io/wow/
下载地址：https://github.com/matthieua/WOW/blob/master/dist/wow.js

说明：WOW.js要和animate.css配合使用，所有其也只兼容支持CSS3 animate属性的浏览器：IE10+、Firefox、Chrome、Opera、Safari。

插件logo如下。。。。。(作者一定是以为忠实的铲屎官)
在这里插入图片描述
这个插件的官方解释是让页面滚动变得更有趣，换而言之就是一个页面滚动的动画插件。

特点：
轻量级类库，不依赖jQuery，超简单的安装和使用，与animate.css配合，只需要短短几行代码就可以实现很多特效。
容易定制，我们可以改变动画去设置喜欢的风格、延迟、长度、偏移和迭代等等。

使用方法：

// 1.引入文件
<link rel="stylesheet" href="animate.min.css">
<script src="wow.min.js"></script>

// 2.在相对的HTML标签中通过类进行引用
<div class="wow slideInLeft"></div>
<div class="wow slideInRight"></div>

// 3.在JavaScript中进行初始化
new WOW().init();

常用参数：

<div class="wow slideInDown" data-wow-duration='20s' data-wow-delay='1s' data-wow-iteration="10"  data-wow-offset='1000' ></div>

其中wow 为引入css，slideInDown为动画样式，data-wow-duration='20s’为动画执行的时间，data-wow-delay='1s’为动画延迟时间，data-wow-iteration="10"为重复的次数。
data-wow-offset=‘1000’ 比较特殊，1000为整个页面高度document.body.clientHeight 减去滚动的距离srollTop再减去盒子距离顶部的距离offsetTop，简单来说就是盒子距离窗口最底部的距离。测试文件不小心删除了…没有保留下来感兴趣的小伙伴可以自行测试~

当然我们还可以自行配置初始参数:

var wow = new WOW({
    boxClass: 'wow', // 动画元素的CSS类（默认类名wow）,如果有冲突可以进行修改
    animateClass:'animated', // 动画CSS类 （默认类名animated），例如slideInDown
    offset: 0, // 距离可视区域多少开始执行动画（默认为0）,注意这里的offset与data-wow-offset='1000'不同，
    这里的offset指的是盒子到达窗口底部的距离。。。我也说不清楚了 随便试一下就明白了。。
    mobile: true, // 是否在移动设备上执行动画 （默认是true）
});

wow.init(); //记得引用

但是WOW.js有一个缺点即：
WOW.js实例的动画只能加载一次，如果要重新执行动画必须要进行刷新。经常会不满足要求，所以接下来继续学习可以重复执行的插件scrollReveal…

基于animate.css的插件库wow.js学习记录

基于animate.css的插件库wow.js学习记录

猜你喜欢