三月 13, 2019 | 前端與Vue

【Nuxt教學】來玩 AOS.js 讓你的網頁變生動吧！

AOS.js是「Animate On Scroll Library」，是個非常簡單的頁面滾動的動態資料庫。想像那些年為了不要讓頁面看起來太靜態，想在滑動時才讓元件顯示，不再是一件痛苦的事！它也可以很有趣！！當然另一個較人熟知的方法，之前也分享過【Drupal教學】實作Animate.css + WoWJS 做出高質感網頁設計，有興趣的請自己看看。最大的差別在於 AOS.js 自由度很高，除了選擇觸發元件動態的設定，重點是持續觸發！想像總是困難，來這看看就知道了 AOS Demo。

AOS.js 是「Animate On Scroll Library」，是個非常簡單的頁面滾動的動態資料庫。想像那些年為了不要讓頁面看起來太靜態，想在滑動時才讓元件顯示，不再是一件痛苦的事！它也可以很有趣！！

當然另一個較人熟知的方法，之前也分享過【Drupal教學】實作Animate.css + WoWJS 做出高質感網頁設計，有興趣的請自己看看。最大的差別在於 AOS.js 自由度很高，除了選擇觸發元件動態的設定，重點是持續觸發！想像總是困難，來這看看就知道了AOS Demo。

接下來就跟著一起玩！開始吧！

<br>

Step.01 安裝 AOS

01. 請先到你的專案底下，選擇偏好的安裝方式：

yarn add aos@next
or 
npm install --save aos@next

Vue.js 安裝方式請參考：How to use Vue.js with Animate On Scroll

02. 至 plugins/ 資料夾路徑中，建立 aos.js 檔案：

＊若是不希望手機版觸發的話，可以寫成以下。在官方文件中可以找到更多 Initialize AOS 的設定唷！

new AOS.init({ disable: "phone" });

03. 至 nuxt.config.js 設定 plugin：

<br>

Step.02 簡述 AOS Attribute

圖自https://github.com/michalsnik/aos/tree/v2

上述這些是我們可以使用的屬性。大致看一下各自的用途，下個 Step 就直接來實作：

data-aos-offset // 觸發動畫的位置上下(正負px)偏移
data-aos-duration // 動畫持續時間
data-aos-delay // 動畫延遲時間
data-aos-anchor // 觸發動畫的錨點
data-aos-anchor-placement // 滑動時觸發設定，錨點的上中下在螢幕上中下
data-aos-once // 觸發次數

<br>

Step.03 實作 Part

01. 在 Nuxt 中，我們建立三個 .section 大區塊與三個 .box 小區塊。這三個 .box 就是要用來展示 aos 用的區塊，分別使用不同的 position 來展示。如下圖：

第一個 .box 為 fixed ：因為釘在畫面某處，代表螢幕滑動的時候永遠都無法滑至 .box ，進而觸發動畫。所以在這邊我們使用 data-aos-anchor ，並設定 data-aos-anchor-placement 當 #sec01 的中間對到螢幕頂部時就觸發 fade-up 動畫。
第二個 .box 為 relative ：並沒有寫position relative，只是為了與其它兩者區隔。讓 .box 自動排序在其它元件之中，在這邊若是沒有設定 data-aos-anchor ，即是以 「元件本身」 來設定 data-aos-anchor-placement （預設值為 top-bottom，也就是螢幕底部滑至 .box 的頂部的時候觸發）。
第三個 .box 為 absolute ：使用了自定義的動畫 custom-fade-left，寫法請看下面。另外，設定了 data-aos-offset 讓螢幕底部（再往下偏移 500px ）觸發 .box 的動畫。

[data-aos="custom-fade-left"] {
  // 預設的樣式
  opacity: 0;
  transform: translateX(100px);
  transition-property: transform, opacity;
  
  // 觸發時的樣式
  &amp;amp;.aos-animate {
    opacity: 1;
    transform: translateX(0);
  }
}

02. 畫面展示：

當螢幕滑至 #sec01 中間時，才會觸發 Fixed .box。

為什麼 Relative .box (top-bottom)得滑到這麼低才觸發？我們沒有設定 data-aos-offset 與 data-aos-anchor-placement。因此，在這是吃預設值唷！

當沒有設 data-aos-offset 與 data-aos-anchor-placement 時，就是預設 120px 與 top-bottom。
當只有設 data-aos-anchor-placement 時，不會吃 data-aos-offset 預設。
當只有設 data-aos-offset，或兩者都有設時，兩個設定都會吃到。