Horizontal Gsap ScrollTrigger - DashingDigit001/WikiPage GitHub Wiki

專案名稱 Horizontal Gsap ScrollTrigger

簡介

語言 : JavaScript

主旨 :

  • 實作水平卷軸
  • 實作水平卷軸的 ScrollTrigger

快速開始

環境建立

  • VS Code
  • Yarn

專案建立

  • Vite 專案

Horizontal Scroll

  1. import { onMounted, ref } from "vue";
import gsap from "gsap";

  2. 加入滾輪事件

    const container = ref();
onMounted(() => {
  container.value.addEventListener("wheel", (e: any) => {
    
    e.preventDefault(); //取消原本預設的滾輪事件
    //透過 gsap 將 scroll 向右邊移動，數值為預設滾輪移動距離*2
    gsap.to(container.value, {
      scrollLeft: container.value.scrollLeft + e.deltaY * 2,
    });
  });
});

  3. html 加入

    <!-- 
  container 這層 div 作為scroll-container 將底下元素包起來，
  h-screen 是為了讓這層 div 固定為 100vh，不隨著子元素變化，
  加入 overflow-scroll 即可監聽 wheel 事件。
  w-fit 設定這層 div 的寬度為其子元素的寬度總和。     
-->
<div ref="container" class="overflow-scroll">
 <div class="flex w-fit">
   <div class="sec1 w-[500px] h-screen">section a</div>
   <div class="w-[500px] h-screen">section a</div>
   <div class="w-[500px] h-screen">section a</div>
   <div class="w-[500px] h-screen">section a</div>
   <div class="w-[500px] h-screen">section a</div>
   <div class="w-[500px] h-screen">section a</div>
 </div>
</div>

Scrolltrigger Horizontal Scroll

  1. import ScrollTrigger from "gsap/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger);

ScrollTrigger.create({
    scroller: container.value,
    trigger: ".sec1",
    horizontal: true,
    markers: true,
    onEnter: () => console.log("onEnter"),
    onLeave: () => console.log("onLeave"),
});
⚠️ **GitHub.com Fallback** ⚠️