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/

 

 

 

标签：动画,WOW,js,data,wow,页面
来源： https://www.cnblogs.com/SallyShan/p/11447072.html