前端页面自动滚动库WOW.js使用备忘

发布时间:2020-12-20 浏览量: 172 文章分类: 前端相关

发现了一个很好用的库WOW.js,他可以实现比如网页的一个区域从空白的地方插入等效果,而且他自带了动画的效果animate.css,相当于我们什么都不用做了,只要引入cssjs,然后初始化,给要添加动画的元素增加对应的类就可以了。简直太方便了。

WOW.js介绍

有的页面在向下滚动的时候,会有一些元素产生细小的动画效果,虽然动画效果比较小,但是却能很吸引人的注意。WOW.js依赖animate.css,所以他支持多达60多种动画效果,能满足我们大部分的使用场景。

浏览器兼容

IE Chrome Firefox Opera Safari
IE10+以上支持 全部支持 全部支持 全部支持 全部支持

由于IE6、IE7老旧浏览器不支持CSS3动画,所以没有效果,而WOW.js也使用了querySelectorAll方法,IE低版本会报错。为了达到更好兼容性,可以增加一个浏览器版本判断。 所以基本是可以放心使用了

WOW.js使用方法

  • 1.引入CSS文件
<link rel="stylesheet" href="css/animate.min.css">
  • 2.引入js文件
<script type="application/javascript" src="js/wow.min.js"></script>
<script>
    new WOW().init();
</script>

如果需要引入自定义配置,也可以这样配置使用

var wow = new WOW({
    boxClass: 'wow',
    animateClass: 'animated',
    offset: 0,
    mobile: true,
    live: true
});
wow.init();
  • 3.直接使用 在需要加上动画的元素上增加对应的类或属性就可以了。
<div class="wow slideInLeft"></div>
<div class="wow slideInRight"></div>

也可以加入属性控制动画持续时间(data-wow-duration)和动画延迟时间(data-wow-delay

<div class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s"></div>
<div class="wow slideInRight" data-wow-offset="10"  data-wow-iteration="10"></div>

配置说明

属性/方法 类型 默认值 说明
boxClass 字符串 'wow' 需要执行动画的元素class
animateClass 字符串 ‘animated’ animation.css 动画的class
offset 整数 0 距离可视区域多少开始执行动画
mobile 布尔值 ture 是否在移动设备上执行动画
live 布尔值 ture 异步加载的内容是否有效