Animate.css和wow.js的搭配使用

经常见到某个网站的动画是在屏幕显示到This元素的时候，会有个过渡动画。

主要区别于在普通页面是在页面加载完成后所有动画一起动，或者设置延迟时间。

而这两个插件混搭使用可以是页面现在到该元素时才加载动画。拥有非常不错的效果。

 

算个比较常见的交互效果，研究了一下午，主要使用以下两个插件完成。

1.wow.js

实现了在网页滚动时的动画效果，有漂亮的动画效果，依赖于Animate.css。

2.Animate.css

非常优秀的CSS3动画库，不依赖于jQuery，纯CSS动画

 

用法：

<link href="animate.css" rel="stylesheet"><script src="wow.min.js"></script> 

　　分别引入wow.js与Animate.css

<div class="wow animatecss"></div>

在想添加动画的元素中添加'wow'     (必须)

在想添加动画的元素中添加'animatecss'     (为动画的Class，可以在该网站找到合适的动画http://daneden.github.io/animate.css/   自己写也可以)

<script>new WOW().init();</script>

可以不依赖JQuery，并且在移动端也有不错的效果

下边附上下载链接地址，方便你们去下载使用！

http://dl42.yunpan.360.cn/intf.php?method=Download.downloadFile&qid=574751937&fname=%2F%E6%96%87%E6%A1%A3%2Fwow_js.rar&fhash=62916758ed57d181f6593594774b0afc9387162d&dt=42_42.44bedc46bb210a0d4a89a4dbf43d0ce0&v=1.0.1&rtick=14557003627324&open_app_id=0&devtype=web&sign=26fc68affc29085a4523f8f9d529d2dd&