使用wow.js增加动效

使用animate.css可以为网站增加动效，但是我们无法控制动画触发的时机。

wow.js是animate.css的好朋友，使用它可以让我们滚动到指定元素时自动触发动画效果。

其网址为：https://www.delac.io/wow/

点击how to use?查看使用教程。

1.引入animate.css

<link href="https://cdn.bootcdn.net/ajax/libs/animate.css/3.7.2/animate.min.css" rel="stylesheet">

2.引入脚本后用一行代码初始化

<script src="https://cdn.bootcdn.net/ajax/libs/wow/1.1.2/wow.min.js"></script>
<script>
    new WOW().init();
</script>

3.给元素添加wow和动画类名即可生效。

<div class="wow bounceInUp">
    Content to Reveal Here
</div>

4.还支持自定义动画时长和延迟开始时间等属性。

<section class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s">
</section>

 注：该示例使用了bootCDN，详情请查看bootCDN的使用。