標籤

｜JS Package｜Create a Parallax Scrolling with GSAP scrollTrigger

Create a Parallax Scrolling with GSAP scrollTrigger

ScrollTrigger 是款 GSAP 的輕量模組，專為實現滾動觸發動畫和互動效果，讓網頁動態更靈活流暢。這次用它來做滾動視差效果。


將 gsap.min.js、ScrollTrigger.min.js 添加在 </body> 和 </html> 之間。

html
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js" type="text/javascript"></script>

在 ScrollTrigger.min.js 連結後，寫以下設定：

script
gsap.registerPlugin(ScrollTrigger); /* 啟用 ScrollTrigger 插件的 GSAP 語法 */

function parallax_bg(){
        gsap.to('.parallax_bg01', {
                  scrollTrigger: {
                    trigger: 'body', /* 以 body 為觸發目標 */
                    scrub: 1, /* 滾動時平滑同步動畫 */
                    start: 'top top', /* 當 body 頂部到達視窗頂部時開始 */
                    end: 'bottom+=20%', /* 當 body 底部往下延伸 20% 時結束 */ 
                  }, 
                  yPercent:-20, /* 垂直移動背景 -20% 的相對位置 */
        }) 
        gsap.to('.parallax_bg02', {
                  scrollTrigger: {
                    trigger: 'body',
                    scrub: 1,
                    start: 'top top',
                    end: 'bottom+=20%',
                  }, 
                  yPercent:-10, /* 垂直移動背景 -10% 的相對位置 */
        }) 
}

/* 載入完成後執行 */
$(document).ready(function(){
        parallax_bg();
});

parallax_bg01：

  • 觸發對象設定為 body，確保動畫與整頁滾動聯動。
  • 動畫觸發點設為 start: 'top top'，即畫面頂部與頁面頂部對齊時開始執行。
  • 結束點設為 end: 'bottom+=20%'，即頁面底部往下 20% 時結束動畫。
  • 動畫效果為元素的垂直位移 yPercent: -20，即背景向上移動 20%。
  • scrub: 1 確保滾動進度與動畫同步且帶有平滑效果。

parallax_bg02：
設置方式與 parallax_bg01 相同，僅改變垂直位移為 yPercent: -10，實現層次分明的視差效果。


圖素來源：
freepik（https://www.freepik.com/）

標籤：