WOW.js——在页面滚动时展现动感的元素动画效果
插件描述:WOW.js 是一款可以实现滚动页面时触发CSS 动画效果的插件,动态效果可以使网站显示更有动感。
当页面在向下滚动的时候,使用WOW.js可以让页面元素产生细小的动画效果,从而引起浏览者注意力。
WOW官网:https://www.delac.io/wow/docs.html
使用教程
1.WOW.js 依赖 animate.css。
可以通过更改设置链接到另一个CSS动画库,在 head
内引入animate.css或者animate.min.css。
<link rel="stylesheet" type="text/css" href="css/animate.css" />
2.引入wow.js或者wow.min.js,然后js文件里再写入代码
<script 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.在块状元素内添加相应的class类名就能实现相应的动画
data-wow-duration: 动画持续时间
data-wow-delay: 动画延迟时间
data-wow-offset: 元素的位置露出后距离底部多少像素执行
data-wow-iteration: 动画执行次数
这四个属性可选可不选。
例子:
<section class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s"> </section>
<!--slideInLeft
说明了动画的样式,是从左边滑动出来的 -->
<section class="wow slideInRight" data-wow-offset="10" data-wow-iteration="10">
</section>
可以在以下网址中参考动画样式https://www.helloweba.net/demo/2018/wowjs/