网页到达可视区域再执行动画效果

下载地址：http://www.bootcdn.cn/wow/

 

今天发现一个非常有趣的js，wow.min.js，Wow.js 允许用户滚动页面的时候展示 CSS 动画。默认的，用户可以使用它来出发 animate.css 动画。但是用户也可以非常容易修改设置喜欢的动画库。Wow.js 比其他 JavaScript 视差插件小，类似 Scrollorama（这个非常华丽，但是也更繁杂）。wow.min.js 非常容易安装和使用。如果你使用 Wow.js，你可以非常快的启动，执行代码。

 

WOW.js 需要 animate.css 配合，所以它支持 animate.css 多达 60 多种的动画效果，能满足您的各种需求。wow.min.js可以实现在滚动下的动画状态。

   实例如下 点击查看>>

 

使用方法：

1、加入animate.css

<link href="http://www.bbsxiaomi.com/case/css/animate.min.css" rel="stylesheet">

 

2、加入wow.js 。（无需引用jQuery）

<script src="http://www.bbsxiaomi.com/js/wow.min.js"></script>
注意new WOW().init();中的WOW要大写，否则就没效果了。

 

3、元素中加入class

<div class="wow animated tada">tada</div>

 

66种CSS3animation动画效果，← 点击查看选择想要的效果，并加入animate.css的class，如：tada，animate效果在下面链接查看

 

4、可以加入 data-wow-duration（动画持续时间）和 data-wow-delay（动画延迟时间）属性，如.（在css下方js上方写需要动画的元素（必须设置为块状或者行内块状！必须设置为块状或者行内块状！必须设置为块状或者行内块状！），并添加class类名。)

 

<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（动画执行次数）这四个属性可选可不选。

 

　　4、为了写文章专门测试了一下data-wow-offset和data-wow-iteration这两个属性，其中data-wow-offset="数值"中的数值是动画完成后元素距离显示器底部的位置，而不是距离浏览器窗口底部的位置。

 

5、wow.js 使用了 querySelectorAll 方法，IE 低版本会报错。为了达到更好的兼容，最好加一个浏览器及版本判断。

<script src="http://www.bbsxiaomi.com/js/wow.min.js"></script>

<script>

if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))){

    new WOW().init();

};

</script>

 

6、也可以自定义wow.js

<script src="http://www.bbsxiaomi.com/js/wow.min.js"></script>

var wow = new WOW({

    boxClass: 'wow',

    animateClass: 'animated',

    offset: 0,

    mobile: true,

    live: true

});

wow.init();

 

属性/方法	类型	默认值	说明
boxClass	字符串	‘wow’	需要执行动画的元素的 class
animateClass	字符串	‘animated’	animation.css 动画的 class
offset	整数	0	距离可视区域多少开始执行动画
mobile	布尔值	true	是否在移动设备上执行动画
live	布尔值	true	异步加载的内容是否有效

 

增加顺序动画

在标签上增加 

    data-wow-delay="0.3s"

如：