使用wow.js和animate.css制作炫酷的网页的可视区域动效

访问一些网站下拉滚动条，网页的可视区域会出现各种效果感觉特别炫酷，了解了一下发现用wow.js和animate.css就能快速做出这种效果，

1.首先引用animate.css

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

记得给所有wow类 元素 隐藏 （防止闪烁）.wow { visibility: hidden; }

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

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

官网：

https://daneden.github.io/animate.css

http://mynameismatthieu.com/WOW/

在线demo演示(来源于网络):http://case.crazyming.com/?link=web%2Fwow