因為這次的公司改版專案大量使用 GSAP 的 ScrollTrigger 功能。由於 ScrollTrigger 主要的功能便是在偵測頁面捲動行為，事實上和 AOS 做到的性質大同小異，而我在使用 AOS … [繼續閱讀...] 關於 用 ScrollTrigger 取代 AOS
如何自學網頁及網站開發
在初次接觸網站開發，或是任何新領域時，都會想了解能夠用什麼樣的工具最有效率的學習，所以決定把自己的學習路徑分享出來。 決定技能樹 如同之前在〈寫作的輸入與產出：如何系統化學習〉中，我們曾經提到要先將技能切割成若干元素。因此，透過〈 … [繼續閱讀...] 關於 如何自學網頁及網站開發
如何用 ScrollTrigger 選擇多個元素/物件
在〈使用 GSAP 的 ScrollTrigger 製作捲動動畫〉中，我們介紹了 ScrollTrigger 的基礎用法，搭配 gsap.to( onUpdate: callback ); … [繼續閱讀...] 關於 如何用 ScrollTrigger 選擇多個元素/物件
10 種當代版面配置 CSS 語法一行搞定 (下)
昨天介紹了 5 種 10 modern layouts in 1 line of CSS 的版面配置，今天將繼續剩下 5 種版面配置。 12 欄版面配置 當代網頁設計很重要的一種版面配置方式，便是 12 … [繼續閱讀...] 關於 10 種當代版面配置 CSS 語法一行搞定 (下)
10 種當代版面配置 CSS 語法一行搞定 (上)
之前因為想看 Google 開發人員大會的直播，因此訂閱了 Google Chrome Developers 的頻道。某天在頻道中看見這部影片，收錄了 10 種當代版面配置的 CSS 語法。因為這部影片的關係，我對於 grid … [繼續閱讀...] 關於 10 種當代版面配置 CSS 語法一行搞定 (上)
使用 GSAP 的 ScrollTrigger 製作捲動動畫
原本我是透過 AOS 這款 JavaScript 函式庫製作頁面捲動的動畫 (animation on scroll)，但這次公司網站改版，需要較複雜的動畫，因此必須改用 GSAP … [繼續閱讀...] 關於 使用 GSAP 的 ScrollTrigger 製作捲動動畫