很高興在2017/10/14發表了自己的第一個博客隨筆，不管你們怎麽想，我自己覺得逼格瞬間高了起來。哈哈哈，哈撒尅。

有時候項目需要一些動畫來提升用戶體驗，吸引用戶註意力。這時wow是個不錯的選擇

wow.js依賴animate.css，不需要jquery；animate.css是純css動畫

官網：http://mynameismatthieu.com/WOW/

建議去官網一看

bootstrap CDN服務：http://www.bootcdn.cn/wow/

當您滾動時顯示動畫。非常Animate.css朋友:-)
輕松自定義動畫設置：樣式，延遲，長度，偏移量，叠代...

下載地址：https://github.com/matthieua/WOW

使用步驟：

1、引入animate.css

　　<link rel="stylesheet" href="css/animate.css" />

2、引入wow.js

　　<script src="js/wow.min.js" type="text/javascript" charset="utf-8"></script>

3、啟動new WOW().init();

　　<script type="text/javascript">
　　　　new WOW（）.init（）;
　　</script>

4、在需要動畫的標簽上面添加class

　　<div class="wow bounce">
　　　　<p>完全契合0基礎的學員</p>
　　　　<p>完全契合0基礎的學員</p>
　　</div>

*動畫效果展示網站：https://daneden.github.io/animate.css/

5.高級選項 註：為了更好的控制動畫效果（屬性）

　　<div class="wow bounce " data-wow-delay="1.5s" data-wow-iteration："1">
　　　　<p>完全契合0基礎的學員</p>

data-wow-duration：更改動畫持續時間
data-wow-delay：動畫開始前的延遲
data-wow-offset：開始動畫的距離（與瀏覽器底部相關）
data-wow-iteration：動畫的次數重復（無限次：infinite）

上面的已經可以實現動畫效果了，但是還有個問題，這些動畫會在加載頁面時一股腦觸發，我們往往想要的是滾動到這裏才開始觸發。

我們可以使用自定義配置。

boxClass：用戶滾動時顯示隱藏框的類名。

animateClass：觸發CSS動畫的類名（animate.css庫默認為“animated”）

偏移量：定義瀏覽器視口底部和隱藏框頂部之間的距離。
當用戶滾動並到達這個距離時，隱藏的框被顯示出來。

手機：在移動設備上打開/關閉WOW.js。

live：自動檢查頁面上的新WOW元素。

這時的JS代碼：

　　var wow = new WOW({
　　　　boxClass: ‘wow‘,
　　　　animateClass: ‘animated‘,
　　　　offset: 0,
　　　　mobile: true,
　　　　live: true
　　});
　　wow.init();

配置如圖：

有的網站采用全屏滾動的fullpage插件與wow相結合的方法，實現的效果比較酷炫。我們完全可以仿寫。

但是使用fullpage.js下wow.js無效失效沒動作

問題出在fullpage隱藏了滾動條,將滾動條開啟即可,把scrollBar設置為true,代碼如下
　　$(‘#fullpage‘).fullpage({
　　scrollBar:true；
　　});
最後利用css將滾動條隱藏,將html添加overflowhidden，代碼如下
　　html{

　　　　overflow:hidden;

　　}

第一次隨筆就到這裏，下次再見。

用wow.js實現頁面滾動時觸發animate.css動畫特效