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 的轉場動畫為主,對於網站的效能不會有太厚重的影響。推薦給大家。

參考資料

預設圖片
Eric Chuang

正職是廣告行銷人員,因為 Google Tag Manager 的關係開始踏入網站製作的領域,進一步把 WordPress 當成 PHP + HTML + CSS + JavaScript 的學習教材。此外,因為工作的關係,曾經用 Automattic 的 Underscores (_s) 替客戶與公司官網進行全客製化佈景主題開發。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料