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 屬性即可套用。