網頁延遲載入動畫的實現-WOW.js

網頁內容一開始不顯示，隨著滑鼠下拉延遲顯示，還有時間差一開始覺得好難好複雜好高大上，直到我發現 wow.js …… 首先是演示地址：https://www.delac.io/wow/ 嗯，狗子確實很可愛接下來是下載：http://www.downyi.com/downinfo/37040.htm ...

網頁內容一開始不顯示，隨著滑鼠下拉延遲顯示，還有時間差

一開始覺得好難好複雜好高大上，直到我發現 wow.js ……

首先是演示地址：https://www.delac.io/wow/

嗯，狗子確實很可愛

接下來是下載：http://www.downyi.com/downinfo/37040.html

似乎所有人都給了一個github地址讓下載，然鵝我嘗試了無數遍始終打不開網址

大概是因為麽有翻牆吧555……

反正找了個野雞網站下載到了

因為wow.js必須和animate.css搭配使用

所以兩個都一起下載了

首先說下相容到IE10+以及其他主流瀏覽器

官方演示：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>demo</title>

<style type="text/css">
*{margin:0;padding:0;}
body{overflow-x:hidden;font-family:"Microsoft Yahei";}
body h1{width:100%;margin:80px 0;font-size:50px;font-weight:500;text-align:center;}
body .txt{margin:80px 0;font-size:16px;text-align:center;}
.dowebok{margin:0 auto;}
.dowebok ul{list-style-type:none;}
.dowebok .row{font-size:0;text-align:center;}
.dowebok .wow{display:inline-block;width:280px;height:280px;margin:30px 15px 0;border-radius:50%;font:30px/280px "Microsoft Yahei";vertical-align:top;*display:inline;zoom:1;}
.bg-green{background:#5bd5a0;}
.bg-blue{background:#1daee9;}
.bg-purple{background:#c843a5;}
.bg-red{background:#eb3980;}
.bg-yellow{background:#ffcc35;}
</style>

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

</head>

<body>
<h1>WOW.js - 頁面滾動動畫展示</h1>

<p class="txt">WOW.js 能讓頁面滾動時顯示動畫，使頁面更有趣。</p>

<div class="dowebok">
    <div class="row">
        <div class="wow rollIn bg-blue"></div>
        <div class="wow bounceInDown bg-green">WOW.js</div>
        <div class="wow lightSpeedIn bg-purple"></div>
    </div>

    <div class="row">
        <div class="wow rollIn bg-yellow" data-wow-delay="0.5s">簡單易用</div>
        <div class="wow pulse bg-red" data-wow-iteration="5" data-wow-duration="0.15s"></div>
        <div class="wow bounceInRight bg-blue">輕量級</div>
    </div>

    <div class="row">
        <div class="wow bounceInLeft bg-green"></div>
        <div class="wow flipInX bg-purple">WOW.js</div>
        <div class="wow bounceInRight bg-yellow"></div>
    </div>

    <div class="row">
        <div class="wow rollIn bg-blue">無需 jQuery</div>
        <div class="wow shake bg-red" data-wow-iteration="5" data-wow-duration="0.15s"></div>
        <div class="wow swing bg-purple" data-wow-iteration="2">純 JS</div>
    </div>

    <div class="row">
        <div class="wow rollIn bg-red"></div>
        <div class="wow bounceInU bg-yellow" data-wow-delay="0.5s">WOW.js</div>
        <div class="wow lightSpeedIn bg-green" data-wow-delay="0.5s" data-wow-duration="0.15s"></div>
    </div>

    <div class="row">
        <div class="wow bounceInLeft bg-purple">依賴 animate.css</div>
        <div class="wow pulse bg-blue" data-wow-iteration="5" data-wow-duration="0.25s"></div>
        <div class="wow lightSpeedIn bg-yellow">多種動畫</div>
    </div>

    <div class="row">
        <div class="wow bounce bg-green" data-wow-iteration="5" data-wow-duration="0.15s"></div>
        <div class="wow bounceInUp bg-red">WOW.js</div>
        <div class="wow bounceInRight bg-purple"></div>
    </div>

    <div class="row">
        <div class="wow rollIn bg-red" data-wow-delay="0.5s">無需 jQuery！？</div>
        <div class="wow bounceInDown bg-green" data-wow-delay="1s"></div>
        <div class="wow bounceInRight bg-yellow" data-wow-delay="1.5s">謝謝</div>
    </div>
</div>

<script src="js/wow.min.js"></script>
<script>
//只能相容IE10+
if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))){
    new WOW().init();
};
</script>
</body>
</html>

效果圖

網上有很多特別簡單的小教程，我也來跟著走一遍

引入wow.js和animate.css之後

實例化構造函數，調用基礎方法

<script>
//只能相容IE10+
if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))){
    new WOW().init();
};
</script>

然後寫上html結構

<div class="box">
  <div class="wow slideInLeft"></div>
  <div class="wow bounceIn"></div>
  <div class="wow slideInRight"></div>
</div>

每個子div都有一個wow類，wow類就相當於Animate.css里的animated這個基礎類
wow類是一定要的，因為它是一個基礎類，如果不寫上，後面一切都是徒勞
wow類後面跟著的是動作類名，可以在Animate.css裡面找

給這些div寫一點樣式，讓它們能在頁面中展示出來

<style type="text/css">
.box {
  width: 900px;
  margin: 100px auto;
  display: flex;
}

.box div {
  width: 300px;
  height: 300px;
  border-radius: 50%;
}

.box div:nth-child(1) {
  background-color: #9C89B8;
}

.box div:nth-child(2) {
  background-color: #F0A6CA;
}

.box div:nth-child(3) {
  background: #B8BEDD;
}
</style>

效果圖

來點高級點的玩法

在html元素上，還可以加上以下4個屬性

data-wow-delay：動畫延遲執行（單位可以是ms或者s）
data-wow-duration：動畫執行時長（單位同上）
data-wow-iteration：動畫重覆執行次數（數字或者迴圈）
data-wow-offset：元素的位置露出後距離瀏覽器底部多少像素執行（偏移量）

wow大概就這麼些，順便補充下animate.css

用一個div簡單舉個小例子

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>demo</title>

<style type="text/css">
#box {
  width: 100px;
  height: 100px;
  background: paleturquoise;
  margin: 100px auto;
}
</style>

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

<body>
<div id="box" class="animated bounce"></div>

</body>
</html>

可以看到綠色小方塊彈啊彈啊彈

還有動畫迴圈執行、動畫延時執行、動畫執行時長的設置

delay-2s：2秒後再執行動畫
delay-3s：3秒後再執行動畫
delay-4s：4秒後再執行動畫
delay-5s：5秒後再執行動畫

slow：用2秒執行完動畫
slower：用3秒執行完動畫
fast：用0.8秒執行完動畫
faster：用0.5秒執行完動畫

如果要設置無限重覆執行動畫，可用下麵這個類
infinite

<div id="box" class="animated bounce delay-2s faster infinite"></div>

這是全部懟上的效果，感覺還不錯

下麵一個點擊按鈕觸發動畫的demo

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>demo</title>

<style type="text/css">
#box {
  width: 100px;
  height: 100px;
  background: paleturquoise;
  margin: 100px auto;
}
#btn{
    display: block;
    width:100px;
    height:30px;
    background: paleturquoise;
    text-align: center;
    line-height:30px;
    border:none;
    margin:30px auto;
    cursor:pointer;
}
</style>

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

<body>
<div id="box"></div>
<button id="btn">btn</button>

<script>

function animateCss(element, animationName, callback) {

  /* 獲取傳過來的 */
  const node = document.querySelector(element);
  
  /* 給元素加上基礎類animated，還有動畫類 */
  node.classList.add('animated', animationName);
  
  function handleAnimationEnd() {
  
    /* 移除基礎類和動畫類 */
    node.classList.remove('animated', animationName);
    
    /* 解除當前元素的事件監聽 */
    node.removeEventListener('animationend', handleAnimationEnd);    /* 如果有回調函數，就執行回調函數 */
    
    if (typeof callback === 'function') callback();
  }
  
  /* 通過事件監聽，當動畫結束後，執行handleAnimationEnd函數 */
  node.addEventListener('animationend', handleAnimationEnd);
  
}
  
  /*點擊按鈕後觸發animateCss函數*/
    btn.onclick = function() {
      animateCss('#box', 'bounce');
    };
</script>
</body>
</html>

如果animate.css里的動畫無法滿足你的需求，可以自己寫

不過不要直接修改animate.css文件

找到animated這個類，複製到自己的css文件里，然後修改設置即可

Over~