使用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的使用。