Physical Address

304 North Cardinal St.
Dorchester Center, MA 02124

使用 GSAP CSSRulePlugin 選取虛擬元素 (pseudo-element)

之前為了幫公司網站插入動畫,稍微接觸了 GSAP 這款動畫函式庫。其中,為了製作「畫底線」的效果,因此使用了虛擬元素,替文字增加了底線,作法如下:

.text-underline {
  position: relative;
}
.text-underline::after {
  content: "";
  position: absolute;
  top: 120%;
  left: 0px;
  width: 0;
  border-top: 3px solid rgb(0, 0, 0);
}

要做出「畫線」的效果,可以透過將 width: 0; 變成 width: 100%; 達成。

var tl = new TimelineMax();
tl.to(".text-underline::after", {
  duration: 0.5,
  width:"100%"
} );

然而,GSAP 的核心,是無法選取虛擬元素 (pseudo-element) 作為選擇器的。因此上面的 GSAP 語法並不會發生任何改變,必須借助 CSSRulePlugin 來達成。

在引入 CSSRulePlugin 後,就能夠透過 CSSRulePlugin 這個方法,從原本的 CSS 中,取得相對應的選擇器。

為什麼特別強調「從原本的 CSS 中」呢?因為之前在實作時踩過雷,怎麼改就是選不到用來畫線的虛擬元素,後來才發現選擇器沒有做到完全比對。CSSRulePlugin 的概念,是從 CSS 檔案中讀取指定的選擇器並加以操作,一旦選擇器不存在於 CSS 檔案中便無法使用。

var tl = new TimelineMax();
var rule = CSSRulePlugin.getRule(".text-underline::after"); // 必須與 CSS 檔案中的選擇器一致
tl.to( rule, {
  duration: 0.5,
  cssRule: {
    width: "100%"
  }
} ); 

呈現出來的效果可以參考我的 CodePen

GSAP 是一款強大的動畫函式庫,我認為在時間軸這一塊,GSAP 的語法還蠻直觀的,所以便開始使用。但也因為它的強大,有些前輩有提到需要考慮效能的問題。

參考資料

預設圖片
Eric Chuang

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

發佈留言

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

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