• Skip to primary navigation
  • Skip to main content

桓桓鄉寇

如果一開始沒有高牆,就沒有所謂的侵略了嗎?

  • 首頁
  • WordPress 筆記
  • 主機
  • 前端
  • 意見回饋

GSAP

延遲載入 Google Maps 的 2 種方法

2021-01-02 by Eric Chuang Leave a Comment

大家好,我是 Eric。 在 2020 年底,最後一次公司網站的小改版中,為了改善 Google Page Speed Insights 的成績,因此研究了應該要如何延遲載入 (lazy loading) Google … [繼續閱讀...] 關於 延遲載入 Google Maps 的 2 種方法

所屬分類: 前端 標籤: Google Maps, GSAP, Lozad, scrollTrigger

使用 GSAP 的 stagger 建立交錯效果

2020-10-26 by Eric Chuang Leave a Comment

在上次的公司網站改版中,替公司的首頁與招募頁添加預載動畫時,使用時間軸的方式來製作轉場的交錯效果,但為了製作這個效果,必須要另外計算時間差,做起來並不直觀: See the Pen Preload with GSAP … [繼續閱讀...] 關於 使用 GSAP 的 stagger 建立交錯效果

所屬分類: 前端 標籤: GSAP, stagger

如何用 ScrollTrigger 選擇多個元素/物件

2020-10-21 by Eric Chuang Leave a Comment

在〈使用 GSAP 的 ScrollTrigger 製作捲動動畫〉中,我們介紹了 ScrollTrigger 的基礎用法,搭配 gsap.to( onUpdate: callback ); … [繼續閱讀...] 關於 如何用 ScrollTrigger 選擇多個元素/物件

所屬分類: 前端 標籤: animation, GSAP, scrollTrigger

使用 GSAP 的 ScrollTrigger 製作捲動動畫

2020-10-19 by Eric Chuang Leave a Comment

原本我是透過 AOS 這款 JavaScript 函式庫製作頁面捲動的動畫 (animation on scroll),但這次公司網站改版,需要較複雜的動畫,因此必須改用 GSAP … [繼續閱讀...] 關於 使用 GSAP 的 ScrollTrigger 製作捲動動畫

所屬分類: 前端 標籤: animation, GSAP, scrollTrigger

GSAP 3 的使用基礎

2020-10-09 by Eric Chuang Leave a Comment

在快要一年前,曾經寫過〈使用 GSAP CSSRulePlugin 選取虛擬元素〉,來製作底線的特效。最近則因為公司網站又要再度改版,大幅提升動畫的使用比例,因此開始進一步研究 GSAP 的使用方法。 今天主要是用下面的範例來說明一些 … [繼續閱讀...] 關於 GSAP 3 的使用基礎

所屬分類: 前端 標籤: animation, GSAP, JavaScript

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

2020-02-02 by Eric Chuang Leave a Comment

之前為了幫公司網站插入動畫,稍微接觸了 GSAP 這款動畫函式庫。其中,為了製作「畫底線」的效果,因此使用了虛擬元素,替文字增加了底線,作法如下: 要做出「畫線」的效果,可以透過將 width: 0; 變成 width: … [繼續閱讀...] 關於 使用 GSAP CSSRulePlugin 選取虛擬元素 (pseudo-element)

所屬分類: 前端 標籤: animation, GSAP, underline

Copyright © 2021 · Genesis Sample on Genesis Framework · WordPress