運用GSAP scrollTrigger 製作常見捲軸特效：讓網站說故事

2020年12月13日 — 目的. 為了讓網頁有吸引力，所以在捲軸滾動畫面時做到監聽捲軸和元素之間的距離，以及觸發的事件或效果。 觸發事件需要用要JavaScript 或jQuery 在每次 ...

尋找喜愛的個人資料、特效鏡頭、濾鏡，以及和scroll 有關的聚光燈熱門影片。只在Snapchat 才找得到的有趣內容。

2023年10月19日 — 當使用者滑動畫面時，頁面最上方和最下方的物件會展現出平移和淡出的效果。 使用者在滑動畫面時，最上方會展示進度條的動畫效果。 這些都是典型的捲動 ...

2020年8月31日 — 《滾動視差》（Parallax Scrolling）的表現法其實在2013年就開始風靡在網站設計裡，但網頁技術一年一年的越來越強大，想當然的《滾動視差》的表現法也 ...

2023年8月9日 — 視差滾動能夠賦予網站深度感和動態感，營造出沉浸式的瀏覽體驗。近年來，越來越多網站開始應用視差滾動效果，除了可以打造引人入勝的視覺效果和特別的 ...

2021年6月21日 — 像這樣子就是一種視差滾動的效果啦！接下來就來說說是怎麼實作的吧 ... scroll 的callback 事件中加入星星，和月亮一起更新當下捲軸高度的位置 ...

很簡單，就是上面說的「綁架滾動」，也有人說Scroll Hijacking。在程式意義上就是，我們直接停止了遊覽器原生的滾動方式，另外自己重新定義滾動的速度、煞車、緩動、延遲等 ...

2017年12月13日 — 網頁scroll 特效, 不用套件, 用jQuery + Css 手工達打造scroll animate ... 例如有個套件叫做scroll-effects , 他就可以達到此效果, 前台的程式碼也可以 ...

2023年1月13日 — 開頭Loading 動畫 · 第一步：讓進度條裡的實際進度以2 秒duration 從0% 衝向100% · 第二步：為了最後要將整個畫面收合，故將畫面內容透明度調整為0，亦可 ...