Day 15 用 WordPress 製作隨視窗捲動的動畫 (animation on scroll)

第 12 屆 iThome 鐵人賽

DAY 15

自我挑戰組

WordPress 客製化從 0 開始系列第 15 篇

12th鐵人賽 wordpress javascript animation

Eric 桓桓

2020-09-16 22:41:24

2942 瀏覽

分享至

大家好，我是 Eric。

前兩天介紹了 JavaScript 的基本觀念，今天我們將嘗試透過 WordPress 引入 JavaScript 函式庫，製作出可以隨視窗捲動的動畫 (animation on scroll，簡稱 AOS)。有關 AOS 的範例，可以參考這個網站。今天的文章是根據我過去在個人網站上的文章加以整理並改寫。

函式庫 (library)

我們在前天曾介紹過 JavaScript 中的「函式」。但一步一步定義自己要用的函式非常耗費時間，因此許多開發者會將函式包裝成一個工具箱，這個工具箱就稱為「函式庫」。我們在昨天介紹的 jQuery 其實也是 JavaScript 函式庫的一種。

Animation on Scroll

AOS 是由 CSS Tricks 網站的 Michał Sajnóg 所開發，一款透過 CSS 的 transition 屬性來製作動畫的函式庫。
在使用 AOS 這個函式庫前，我們需要先引用這個函式庫。根據開發者的說明文件，我們知道要將以下 CSS 檔引入 <head> 區塊中：

<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />

並將以下 JavaScript 檔嵌入於 </body> 之前：

 <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
 <!-- 初始化 AOS -->
 <script>
     AOS.init();
 </script>

wp_enqueue_scripts

引用 JavaScript 函式庫的方法，除了直接將上述語法手動加入 header.php 或 footer.php 外，另外一種比較安全的做法，是透過 wp_enqueue_scripts 這個勾點 (hook，這個概念會在 PHP 篇章中進一步介紹)。將下列的程式碼片段複製到子佈景主題的 functions.php 或 Code Snippets：

function eric_enqueue_scripts(){
    wp_enqueue_script( 'aos', 'https://unpkg.com/aos@next/dist/aos.js' );
    wp_enqueue_style( 'aos-style', 'https://unpkg.com/aos@next/dist/aos.css' );
}
add_action( 'wp_enqueue_scripts', 'eric_enqueue_scripts' );

加入資料屬性 (data attribute)

在引用函式庫後，我們需要替欲顯示動畫的元素加入 data-aos 的屬性：

<!-- 基礎語法 -->
<div data-aos="動畫類型">
</div>

<!-- 進階設定 -->
<div data-aos="動畫類型"
     data-aos-duration="動畫延續時間"
     data-aos-easing="加/減速類型"
     data-aos-offset="相對位移"
     data-aos-anchor="參照點">
 </div>

從這個例子中，我們可以看到 AOS 使用了資料屬性 (data attribute)，這種屬性通常用來記錄供 JavaScript 使用的資料，以 AOS 為例，便是將上述的設定值儲存在 data-aos-屬性名稱 中。

那要怎麼加入資料屬性呢？我們可以根據昨天在 jQuery 中的方法加入。首先，先在資料夾中新增一個 JavaScript 檔案，例如：aos-init.js。接著我們透過 wp_enqueue_scripts 小節中的方法，將這這個 JavaScript 檔案引入。

AOS.init(); 
(function($){
    $(選擇器).attr({
        "data-aos" : "動畫類型"
    });
})(jQuery);

function eric_enqueue_scripts(){
    wp_enqueue_script( 'aos', 'https://unpkg.com/aos@next/dist/aos.js' );
    wp_enqueue_script( 'aos-init', '儲存路徑/aos-init.js' );
    wp_enqueue_style( 'aos-style', 'https://unpkg.com/aos@next/dist/aos.css' );
}
add_action( 'wp_enqueue_scripts', 'eric_enqueue_scripts' );

其他解決方案

除了透過自己編碼的方式來套用捲動動畫的效果外，WordPress 中也提供了許多外掛可以協助你快速做出動態的效果。譬如免費外掛 Animate it! 或是付費版的 Scroll Magic WordPress。

結語

今天我們透過 AOS 這個函式庫替網站加入了基本的動態效果。從這個範例中，我們可以看到 JavaScript 如何透過操作 DOM 元素，為其加上 CSS 類型後，打造動態的網頁。文章最後，我們也提到 WordPress 的強項：你想到的功能，有 80% 的機會已經有開發好的外掛。
在今天的內容裡，我們再度提到了 wp_enqueue_scripts 這個勾點。雖然勾點的概念會等到 PHP 的篇章才會詳細介紹，但為了引用外部的函式庫，我們接下來幾天都還是會反覆使用這個方法，來引用外部的函式庫與資源。
明天，我們會再介紹另外一款強大的動畫函式庫：GSAP。