html页面滚动时触发,wow.js实现页面滚动时触发animate.css动画特效

有时候项目需要一些进场动画来提升用户体验，吸引用户注意力。这时wow是个不错的选择

wow.js依赖animate.css，不需要jquery；animate.css是纯css动画轻松自定义动画设置：样式，延迟，长度，偏移量，迭代，当您滚动时显示动画。

建议去官网：http://mynameismatthieu.com/WOW/

bootstrap CDN服务：http://www.bootcdn.cn/wow/

下载地址：https://github.com/matthieua/WOW

一、引入文件animate.css和wow.js

二、HTML

可以加入 data-wow-duration(动画持续时间)和 data-wow-delay(动画延迟时间)属性，如：

data-wow-duration：更改动画持续时间

data-wow-delay：动画开始前的延迟

data-wow-offset：开始动画的距离(与浏览器底部相关)

data-wow-iteration：动画的次数重复(无限次：infinite)

三、JavaScriptnew WOW().init();

如果需要自定义配置，可如下使用：var wow = new WOW({

boxClass: 'wow',

animateClass: 'animated',

offset: 0,

mobile: true,

live: true

});

wow.init();

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

配置属性/方法类型默认值说明

boxClass字符串'wow''wow'需要执行动画的元素的 class

animateClass字符串'animated''animated'animation.css 动画的 class

offset整数0距离可视区域多少开始执行动画

mobile布尔值true是否在移动设备上执行动画

live布尔值true异步加载的内容是否有效

有的网站采用全屏滚动的fullpage插件与wow相结合的方法，实现的效果比较酷炫。我们完全可以仿写。

但是使用fullpage.js下wow.js无效失效没动作

问题出在fullpage隐藏了滚动条,将滚动条开启即可,把scrollBar设置为true,代码如下$('#fullpage').fullpage({

scrollBar:true；

});

最后利用css将滚动条隐藏,将html添加overflowhidden，代码如下html{

overflow:hidden;

}