插件描述：WOW.js 是一款帮助你实现滚动页面时触发CSS 动画效果的插件
在一些网页上，当你滚动页面的时候会看到各式各样的元素动画效果，非常动感。WOW.js 就是一款帮助你实现这种 CSS 动画效果的插件，很容易定制，你可以改变动画设置喜欢的风格、延迟、长度、偏移和迭代等。
使用方法：
1、引入文件
<link rel="stylesheet" href="css/animate.min.css">
2、HTML
<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>
3、JavaScript
new WOW().init();
如果需要自定义配置，可如下使用：
var wow = new WOW({
boxClass: 'wow',
animateClass: 'animated',
offset: 0,
mobile: true,
live: true
});
wow.init();配置
| 属性/方法 | 类型 | 默认值 | 说明 |
| boxClass | 字符串 | ‘wow’ | ‘wow’需要执行动画的元素的 class |
| animateClass | 字符串 | ‘animated’ | ‘animated’animation.css 动画的 class |
| offset | 整数 | 0 | 距离可视区域多少开始执行动画 |
| mobile | 布尔值 | true | 是否在移动设备上执行动画 |
| live | 布尔值 | true | 异步加载的内容是否有效 |
PREVIOUS:
NEXT:
相关插件-滚动,动画效果
讨论这个项目（33）回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约
lucky 0
2017/3/28 13:47:32
在本地刷新，能显示。在服务器上。刷新当前不显示。需要滚动才能显示。。。
liuyun20
2017/12/14 16:52:04
这个插件本来就是鼠标滚动时，可视的地方发生动画，但只发生一次，鼠标滚回时，不发生
传说中de高手?2 0
2016/12/22 1:12:46
-
这个有免费的
Fred梁发鹏0
2018/5/21 21:58:37
-
哪里有免费的
狗晟子―Dogend0
2019/7/7 17:17:17
-
Github
天堑 0
2016/12/13 9:12:11
-
开始的时候，挺好的，后来突然就没有任何效果，还把我的div给隐藏了。最后只能删了，自己用jquery写效果。谁知道为什么啊。一样的代码，两个文件，一个效果正常，一个把div给隐藏了。
回复
黑皮2o15 0
2016/7/17 14:07:00
-
这个效果挺好的，但是一个页面只能显示一次效果，也就是，向下滚动出现了效果以后，再次来回滚动，都不会出现动画效果了，如何解决呢？
好好先森0
2017/8/8 23:52:17
-
解决了吗？同问
liuyun20
2017/12/14 16:56:22
这个插件就是那样的，当可视的地方加载时，只播放动画一次，如果滚回时，也 播放动画，会让画面显得凌乱
海日一山盟0
2018/4/10 11:33:03
-
有人已经改了js，可以解决这个问题
渠道速建-策划-董哲0
2018/11/15 11:50:39
-
谁改了js，能分享么？
夏天的回忆0
2018/11/21 16:31:12
-
wow.min2.js，可以实现上下滚动效果
A boy of temperament0
2019/6/10 17:05:39
-
aos.js可以完美实现上下滚动显示与隐藏
没有栀子花的季节。 0
2016/6/2 18:06:23
-
为什么用了插件之后，刷新页面，第一视窗的窗口会出动画，往下拉动滚动条的时候，下面设置的动画瓦全没作用，没作用不说，还把内容全部都隐藏了
小村青年0
2016/7/25 0:07:38
-
同问
王桥-帝联科技广州分公司0
2016/9/7 15:09:03
-
把你的HTML代码贴出来看一下
我叫胡八二xX。0
2016/11/3 14:11:14
-
一样的问题啊！纠结好几天了。。。。
つ明显喜欢。0
2017/5/19 11:58:51
谁知道怎么弄
?? 勿忘初心 ??0
2017/6/23 19:31:15
我也是 所有的动画一起执行啦 并没有滚动到他 他才执行！！！！
渐行 渐远0
2017/8/22 14:46:06
解决了吗？移动端也是这问题，怎么处理
那朵云0
2018/1/25 15:07:34
有人知道怎么解决吗？
黄媛0
2018/7/12 7:51:51
-
换个布局试试
😃
- 😀
- 😉
- 😥
- 😵
- 😫
- 😘
- 😡
- 👍
- 🌹
- 👏
- 🍺
- 🍉
- 🌙
- ⭐
- 💖
- 💔
😃
取消回复
- 😀
- 😉
- 😥
- 😵
- 😫
- 😘
- 😡
- 👍
- 🌹
- 👏
- 🍺
- 🍉
- 🌙
- ⭐
- 💖
- 💔
