什么是Wow.js
WOW.js是对animate.css的扩充,让页面滚动更有趣。我们通过WOW.js可以在页面逐渐向下滚动的过程中逐渐释放这些动画效果。也就是说:当我们向下滚动页面时,可以省去很多判断条件,让CSS动画逐渐显示出来。
//官方demo
https://www.delac.io/wow/
//各类效果展示
https://daneden.github.io/animate.css/
WOW.js的详细用法
1.下载wow.js文件
https://registry.npmjs.org/wowjs/-/wowjs-1.1.3.tgz
2.导入其中的wow.js文件和animate.css文件,并且在文件脚本中
<script>
new WOW().init();
</script>
3.将wow的类绑定元素
<div class="wow bounceInUp">
WOW.js
</div>
4.高级选项
<div class="wow bounceInRight" data-wow-delay="1.5s" data-wow-iteration="1">
WOW.js
</div>
data-wow-duration:更改动画持续时间
data-wow-delay:动画开始前的延迟
data-wow-offset:开始动画的距离(与浏览器底部相关)
data-wow-iteration:动画的次数重复(无限次:infinite)
做完上面这些步骤,我们就已经可以实现动画效果了,但是有个问题,就是在页面触发时会一股脑全部出现,这达不到我们理想中的样子,我们是想要随着鼠标滚动来触发,那该怎么做呢?
5.另外的自定义选项
boxClass:用户滚动时显示隐藏框的类名。
animateClass:触发CSS动画的类名(animate.css库默认为“animated”)
偏移量:定义浏览器视口底部和隐藏框顶部之间的距离。当用户滚动并到达这个距离时,隐藏的框被显示出来。
手机:在移动设备上打开/关闭WOW.js。
live:自动检查页面上的新WOW元素。