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

　　　　很高興在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

 

使用步驟：

一、引入animate.css

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

二、引入wow.js

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

三、啓動new WOW().init();

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

四、在須要動畫的標籤上面添加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;

　　}

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

 

轉載請保留出處，謝謝