Scroll experiment
滑動時背景逐層浮現的影像特效
往下滑時,背景會有圖片由遠至近地淡入放大,營造出類似 three.js 場景的深度感。可自行替換 data-bg-image 連結。
靈感來源:e-t-d-s.com
技術:GSAP + ScrollTrigger,2D 圖層堆疊(非必須 three.js)。
Layer 01 — 霧中光暈
背景圖先由模糊狀態慢慢浮現,並在你滑過時向前推近,淡出後交給下一張。
Layer 02 — 星空色帶
ScrollTrigger 將此區段的進度映射到背景的透明度與縮放,形成平滑過渡。
Layer 03 — 幾何霓虹
可以替換成你的專案截圖或產品圖,保持相同 data-bg-image 屬性即可套用。