很高興在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 注：wow必須加在動畫類名前面
<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>
<p>完全契合0基礎的學員</p>
</div>
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;
}
第一次隨筆就到這里，下次再見。
轉載請保留出處，謝謝