Physical Address
304 North Cardinal St.
Dorchester Center, MA 02124
用 Animation on Scroll 幫 WordPress 增加動畫效果
發現一直有這篇孤兒沒把內容補上，趕快來補一下。
Animation on Scroll 是一款非常方便的函式庫，透過設定 data-aos 這個屬性值，替你的網站加入動畫的效果。這款動畫程式的效果，可以滿足很多客戶想要「讓網站動起來」的需求，是款很值得加入網站的小功能。
內容目錄
前置作業：引入 AOS 函式庫
<?php /* 此段加入 functions.php */
function huanyi_scripts(){
wp_enqueue_script( 'aos', 'https://unpkg.com/aos@2.3.1/dist/aos.js' );
wp_enqueue_style( 'aos-style', 'https://unpkg.com/aos@2.3.1/dist/aos.css' );
}
add_action( 'wp_enqueue_scripts', 'huanyi_scripts' );
/**
* Initiate AOS
*/
function huanyi_aos(){ ?>
<script>
(function($){
$('.jetpack-lazy-image').on('load',function(){
AOS.init();
});
})(jQuery);
</script>
<?php }
}
add_action( 'wp_footer', 'huanyi_aos' );
/**
* Initiate AOS with Jetpack, 如果使用 Jetpack 的 lazy-load 功能，
* 要用 jetpack-lazy-image.onload 事件
* 才不會造成捲動深度偏差的問題
*/
function huanyi_aos_jetpack(){ ?>
<script>
(function($){
$('.jetpack-lazy-image').on('load',function(){
AOS.init();
});
})(jQuery);
</script>
<?php }
}
add_action( 'wp_footer', 'huanyi_aos_jetpack' );上述的程式碼，只是啟用 AOS 的功能而已，在一開始有提到 data-aos 這個屬性。由於 WordPress 並沒有內建 data attributes 的勾點可以使用，因此有幾種方法可以加上這個屬性。
方法一：直接在範本中加入
通常在佈景主題的架構中，會有 template-tags.php、template-functions.php 或 template-parts/*.php 這些檔案，目的在於定義特定內容呈現的樣式，例如圖片。以佈景主題 Twenty twenty 中的 template-parts/content.php 這個檔案為例。
我們只要在第 30 行的 div 中，加入 aos-data=”fade-up”，未來在頁面載入後，文章就會由下往上淡入。
<?php
/**
* The default template for displaying content
*
* Used for both singular and index.
*
* @link https://developer.wordpress.org/themes/basics/template-hierarchy/
*
* @package WordPress
* @subpackage Twenty_Twenty
* @since 1.0.0
*/
?>
<article <?php post_class(); ?> id="post-<?php the_ID(); ?>">
<?php
get_template_part( 'template-parts/entry-header' );
if ( ! is_search() ) {
get_template_part( 'template-parts/featured-image' );
}
?>
<div class="post-inner <?php echo is_page_template( 'templates/template-full-width.php' ) ? '' : 'thin'; ?> ">
<div class="entry-content" data-aos="fade-up">
//下略方法二：透過 JavaScript 或 jQuery 的方式加入
相較於直接修改範本的 PHP 檔案，由於有較多的外掛支援在頁面中插入 JavaScript，因此透過 JavaScript 與 jQuery 的難易度相對較低。以上述的例子為例，我們要將具有 entry-content 這個類別的 div 元素加上 fade-up 這個動畫效果。
(function($){
$("div.entry-content").attr({
"data-aos":"fade-up"
});
})(jQuery);除了使用 JavaScript 的外掛外，也可以將上述的 JavaScript 整合進 functions.php 中。
<?php
function huanyi_add_aos(){?>
<script>
(function($){
$("div.entry-content").attr({
"data-aos":"fade-up"
});
})(jQuery);
</script>
<?php }
add_action( 'wp-footer', 'huanyi_add_aos' );進階事件：搭配其他 JavaScript 函式庫
如果你的網站使用的是其他 JavaScript 函式庫，通常開發人員會加入相對應的事件，供其他開發人員觸發其他事件。
以 Lozad 這個函式庫為例，為了避免因延遲載入 (lazy load) 造成 AOS 計算捲動深度時的誤差，可以做以下的調整：
AOS.init(); //當然還是要先初始化
const observer = lozad(".lozad", {
load: function( el ){
/* 下面這一段，除了 src 之外，背景圖、srcset 都可以進行延遲載入 */
el.src = el.dataset.src ? el.dataset.src : '';
el.style.backgroundImage = el.dataset.backgroundImage ? 'url('+el.dataset.backgroundImage+')' : '';
el.srcset = el.dataset.srcset ? el.dataset.srcset : '';
/* 重點是下面 */
el.onload = function() { //相當於 Jetpack 版本中的 $('.jetpack-lazy-image').on('load',function(){});
el.classList.add('lozad-fade');
}
AOS.refreshHard(); //強制重新計算
}
});
observer.observe();結語
AOS 算是我目前客製化佈景主題的標準配置之一。原因無他，這個函式庫使用上相當容易上手，而且也提供了客製化的空間，可以自行加入自訂的動畫樣式。而且動畫是以 CSS 的轉場動畫為主，對於網站的效能不會有太厚重的影響。推薦給大家。
參考資料
