Animate 和wow.js

Animate 通过CSS3封装的一个css插件
wow.js 可以链接到CSS动画库
两者配合起来可以快速制作你的网页特效

安装

wowjs安装 通过CDN

<script src="https://cdn.bootcss.com/wow/1.1.2/wow.js"></script>

<link href="https://cdn.bootcss.com/animate.css/3.7.0/animate.css" rel="stylesheet">

也可以直接下载出来到本地
wowjs github地址https://github.com/matthieua/WOW
Animate github地址:https://github.com/daneden/animate.css

使用

通过CDN连接wow和animate后,需要通过js激活wow

new WOW().init()

然后添加wow样式到你要进行动画的标签

<div class="wow">
动画的内容
</div>
<!-- 选择Animate动画 -->
<!--wow样式激活wowjs插件, bounceInUp 是Animate的动画样式,更多样式可以到https://daneden.github.io/animate.css/看-->
<div class"wow bounceInUp">
动画的内容
</div>

wow高级选项

data-wow-duration: 更改动画持续时间，单位秒s
data-wow-delay: 动画开始前的延迟,单位秒s
data-wow-offset: 开始动画的距离（与浏览器底部相关）
data-wow-iteration:动画的次数重复
这个可以直接添加到标签里设置

<div class="wow bounceInUp" data-wow-duration='1s' data-wow-delay="1s" data-wow-offset="10" data-wow-iteratio="10">
动画的内容
</div>

更多教程可以参考他们的Github