wow.js实现上下滚动页面都有效果，wow.js重复执行？

在一些网页上，当你滚动页面的时候会看到各式各样的元素动画效果，非常动感。WOW.js 就是一款帮助你实现这种 CSS 动画效果的插件，很容易定制，你可以改变动画设置喜欢的风格、延迟、长度、偏移和迭代等。

WOW.js 依赖 animate.css，所以它支持 animate.css 多达 60 多种的动画效果，能满足您的各种需求。

但是大家都直接wow.js不能像RevealScroll一样，当网页上下滚动页面的时候都有效果，wow.js只能实现一次，怎么样让wow.js也能上下滚动的时候有效果呢，经青岛网络公司修改了核心代码后已经实现效果。下面给出下载地址，提供给大家直接使用！

下载地址：/static/upload/js/wow.min2.js

【用法】

在做项目中，有时需要做到滚动条滑到某个位置时，才能显示动画，wow.js插件可以很好的解决问题

下面说明一下怎么使用这个插件：

1、wow.js依赖于animate.css，首先在头部引用animate.css或者animate.min.css

2.在最底部引用wow.js或者wow.min.js，然后再下面再写一行javascript代码（无需引用jQuery）

<script type="text/javascript" src="/static/upload/js/wow.min2.js"></script>   实现上下滚动页面都有效果

<script type="text/javascript" src="https://cdn.dowebok.com/131/js/wow.min.js"></script> 实现向下滚动页面都有效果

<script type="text/javascript">  
    new WOW().init();
</script>  


如果需要自定义配置，可如下使用：

var wow = new WOW({

boxClass: 'wow',

animateClass: 'animated',

offset: 0,

mobile: true,

live: true

});

wow.init();

注意：new WOW().init();中的WOW要大写，否则就没效果了

3、在css下方js上方写需要动画的元素（必须设置为块状或者行内块状），并添加class类名

在需要动画的标签上添加.wow 和你的动画元素即可

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

类名前面的wow是每一个带动画的元素都要加的，slideInLeft就是说明动画样式。

后面的data-wow-duration（动画持续时间）、data-wow-delay（动画延迟时间）、data-wow-offset（元素的位置露出后距离底部多少像素执行）和data-wow-iteration（动画执行次数）这四个属性可选可不选

注意：其中data-wow-offset="数值"中的数值是动画完成后元素距离显示器底部的位置，而不是距离浏览器窗口底部的位置。

扫描二维码手机查看该文章
文章引用：https://www.qinghuahulian.com/news/webzhishi/1367.html

相关资讯