三月 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 [email protected]
or 
npm install --save [email protected]

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 來展示。如下圖:

  1. 第一個 .box 為 fixed :因為釘在畫面某處,代表螢幕滑動的時候永遠都無法滑至 .box ,進而觸發動畫。所以在這邊我們使用 data-aos-anchor ,並設定 data-aos-anchor-placement#sec01 的中間對到螢幕頂部時就觸發 fade-up 動畫。

  2. 第二個 .box 為 relative :並沒有寫position relative,只是為了與其它兩者區隔。讓 .box 自動排序在其它元件之中,在這邊若是沒有設定 data-aos-anchor ,即是以 「元件本身」 來設定 data-aos-anchor-placement (預設值為 top-bottom,也就是螢幕底部滑至 .box 的頂部的時候觸發)。

  3. 第三個 .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-offsetdata-aos-anchor-placement。因此,在這是吃預設值唷!
  1. 當沒有設 data-aos-offsetdata-aos-anchor-placement 時,就是預設 120pxtop-bottom
  2. 當只有設 data-aos-anchor-placement 時,不會吃 data-aos-offset 預設。
  3. 當只有設 data-aos-offset,或兩者都有設時,兩個設定都會吃到。

  • 當螢幕底部滑至 Absolute .box 頂部時,要再往下滑動 500px 才會觸發。

<br>

結論:

從上面的範例來看,我們是將設定各別家在 .box 的標籤上,很簡單但你可能會覺得畫面變得不易瀏覽,那你可以決定把一些共同的設定,如 delay, duration 設定在 aos.js init 裡面,讓所有的 aos 都有同樣的設定。

AOS.js 只要用過就會很快能上手,剩下的就是調整觸發動畫的錨點在哪,以及自訂想要的動畫樣式。這樣就可以很方便來針對像是圖示、back to top等,任何想要動起來的元件來設定了。

hashtags: