亚洲日韩精品a∨片无码一区|精品国产日韩欧美在线观看|亚洲精品成人网站在线播放|亚洲一区二区三区香蕉

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

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

官網(wǎng)：http://mynameismatthieu.com/WOW/

建議去官網(wǎng)一看

bootstrap CDN服務(wù)：http://www.bootcdn.cn/wow/

當(dāng)您滾動時顯示動畫。非常Animate.css朋友:-)

輕松自定義動畫設(shè)置：樣式，延遲，長度，偏移量，迭代...

下載地址：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、在需要動畫的標(biāo)簽上面添加class      注：wow必須加在動畫類名前面

<div class="wow bounce">
  <p>完全契合0基礎(chǔ)的學(xué)員</p>
  <p>完全契合0基礎(chǔ)的學(xué)員</p>
</div>

*動畫效果展示網(wǎng)站：https://daneden.github.io/animate.css/

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

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

data-wow-duration：更改動畫持續(xù)時間

data-wow-delay：動畫開始前的延遲

data-wow-offset：開始動畫的距離（與瀏覽器底部相關(guān)）

data-wow-iteration：動畫的次數(shù)重復(fù)（無限次：infinite）

上面的已經(jīng)可以實(shí)現(xiàn)動畫效果了，但是還有個問題，這些動畫會在加載頁面時一股腦觸發(fā)，我們往往想要的是滾動到這里才開始觸發(fā)。

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

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

aninateClass：觸發(fā)CSS動畫的類名（animate.css庫默認(rèn)為“animated”）

偏移量：定義瀏覽器視口底部和隱藏框頂部之間的距離。

當(dāng)用戶滾動并到達(dá)這個距離時，隱藏的框被顯示出來。

手機(jī)：在移動設(shè)備上打開/關(guān)閉WOW.js。

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

這時的JS代碼：

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

配置如圖：

有的網(wǎng)站采用全屏滾動的fullpage插件與wow相結(jié)合的方法，實(shí)現(xiàn)的效果比較酷炫。我們完全可以仿寫。

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

問題出在fullpage隱藏了滾動條,將滾動條開啟即可,把scrollBar設(shè)置為true,代碼如下

$('#fullpage').fullpage({
  scrollBar:true；
});

最后利用css將滾動條隱藏,將html添加overflowhidden，代碼如下

html{overflow:hidden;}