在網頁設計中,視差滾動是一種能夠增強用戶體驗的強大效果。使用 GSAP (GreenSock Animation Platform) 與 ScrollTrigger 外掛,你可以輕鬆地創建豐富的滾動動畫,使前景與背景之間的移動產生層次感。本教學將引導你如何使用 GSAP 創建前景視差效果,並如何通過調整參數來使移動效果更加顯著。
1. 安裝 GSAP 和 ScrollTrigger
首先,你需要加入 GSAP 及其 ScrollTrigger 外掛,可以通過 CDN 引入:
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.4/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.4/ScrollTrigger.min.js"></script>
2. 建立基本 HTML 結構
建立包含背景和前景元素的 HTML 結構,前景元素將用於創建視差效果:
<div class="parallax">
<div class="background"></div>
<div class="foreground">
<img src="foreground-image.png" alt="Foreground Image">
</div>
</div>
3. CSS 樣式設置
使用 CSS 設定背景和前景的基本樣式:
.parallax { position: relative; height: 100vh; overflow: hidden; } .background { position: absolute; top: 0; left: 0; width: 100%; height: 120%; background: url('background-image.jpg') center/cover no-repeat; } .foreground { position: relative; z-index: 1; /* 確保前景位於上層 */ display: flex; justify-content: center; align-items: center; height: 100vh; } .foreground img { width: 50%; transition: transform 0.3s ease-out; }
4. 使用 GSAP 和 ScrollTrigger 創建視差效果
通過 GSAP 的 ScrollTrigger 插件來實現滾動效果,讓背景和前景以不同速度移動,從而產生視差效果:
gsap.registerPlugin(ScrollTrigger); // 背景的滾動效果 gsap.to(".background", { y: -150, // 背景稍微向上移動 ease: "none", scrollTrigger: { trigger: ".parallax", start: "top top", end: "bottom top", scrub: true, }, }); // 前景圖片的滾動效果 gsap.to(".foreground img", { y: 400, // 調整 y 值來加大移動量 ease: "none", scrollTrigger: { trigger: ".parallax", start: "top top", end: "bottom top", scrub: true, }, });
5. 增強移動效果的技巧
如果你覺得前景圖片的移動效果不夠明顯,可以考慮以下幾種方法來增強效果:
-
加大移動量 (
y
值)-
增加
y
的值,比如從100
增加到400
,可以讓前景圖片在滾動過程中移動得更加顯著。
y: 400 // 更大的 y 值創造更明顯的移動效果
-
-
調整 ScrollTrigger 的範圍
-
調整
scrub
值來控制滾動的同步平滑程度,或改變start
和end
的設置來讓動畫持續更長時間。
scrub: 1 // 增加 scrub 的值可以讓滾動效果更平滑和顯著
-
-
增加背景和前景的對比
-
調整背景的移動量,讓它移動得更慢,而前景圖片移動得更快,從而產生更明顯的對比。
-
-
結合其他效果 (如
scale
或rotation
)-
除了移動,你還可以結合
scale
或rotation
來讓前景圖片更加突出,例如:
-
gsap.to(".foreground img", { y: 400, scale: 1.2, // 輕微放大來增強視覺效果 ease: "none", scrollTrigger: { trigger: ".parallax", start: "top top", end: "bottom top", scrub: true, }, });
使用 GSAP 和 ScrollTrigger,你可以輕鬆創建具有前景和背景層次感的視差滾動效果。通過調整移動量、動畫範圍和增加額外效果,你可以顯著增強視覺效果,使你的網頁更具吸引力。