Home IT/WEB GSAP와 ScrollTrigger 플러그인을 사용하여 여러 패널을 고정 시키는 방법

GSAP와 ScrollTrigger 플러그인을 사용하여 여러 패널을 고정 시키는 방법

여러 패널 고정시키는 방법

GSAP (GreenSock Animation Platform)과 ScrollTrigger 플러그인을 사용하여 여러 패널을 스크롤 위치에 따라 고정하는 기능을 구현할 수 있습니다.

inline ad
<section id="section1" class="parallax__item"></section>
<section id="section2" class="parallax__item"></section>
<section id="section3" class="parallax__item"></section>
<section id="section4" class="parallax__item"></section>
<section id="section5" class="parallax__item"></section>
gsap.utils.toArray('.parallax__item').forEach((panel, i) => {
    ScrollTrigger.create({
      trigger: panel,
      start: 'top top',
      pin: true,
      pinSpacing: false
    })
})
  1. gsap.utils.toArray(‘.parallax__item’): .parallax__item 클래스를 가진 모든 DOM 요소를 선택하여 배열로 변환합니다. toArray 메서드는 CSS 선택자, NodeList, 배열 등을 배열로 변환합니다. 이를 통해 쉽게 반복 작업을 수행할 수 있습니다.
  2. .forEach((panel, i) => { … }): 반환된 배열에 대해 forEach 메서드를 사용하여 각 패널에 대해 반복 작업을 수행합니다. 여기서 panel은 현재 패널 요소를 나타내며, i는 인덱스를 나타냅니다.
  3. ScrollTrigger.create({ … }): 각 패널에 대해 ScrollTrigger 인스턴스를 생성합니다. 이를 통해 스크롤 위치에 따른 애니메이션 효과를 제어합니다.
    • trigger: panel: 현재 패널을 트리거로 설정합니다. 스크롤 위치가 이 트리거의 시작과 끝 위치 사이로 이동하면 애니메이션 효과가 적용됩니다.
    • start: ‘top top’: 애니메이션 시작 지점을 정의합니다. ‘top top’은 트리거 요소의 상단이 뷰포트 상단에 도달했을 때 시작하게 됩니다.
    • pin: true: 트리거 요소를 고정합니다. 스크롤 위치가 지정된 시작과 끝 위치 사이일 때, 트리거 요소가 뷰포트 내에 고정됩니다.
    • pinSpacing: false: 트리거 요소가 고정된 상태에서 다른 요소 사이의 공간을 제거합니다. 이로써 다음 트리거가 이전 트리거 바로 뒤에 나타나게 할 수 있습니다.

결과적으로, 이 코드는 .parallax__item 클래스를 가진 각 패널에 대해 스크롤 위치에 따라 고정 효과를 적용합니다. 패널이 뷰포트 상단에 도달하면 고정되고, 다음 패널이 도달하면 그 다음 패널이 고정되는 식입니다.

원하는 패널만 고정시키는 방법

원하는 패널만 고정하려면, .forEach 반복문 내에서 조건문을 사용하여 특정 패널을 선택하여 처리할 수 있습니다. 패널을 선택하는 기준은 다양할 수 있는데, 인덱스, 클래스 이름, 데이터 속성 등을 활용할 수 있습니다.

인덱스를 사용하여 특정 패널 고정하기

gsap.utils.toArray('.parallax__item').forEach((panel, i) => {
  if (i === 2) { // 인덱스 2인 패널만 고정
    ScrollTrigger.create({
      trigger: panel,
      start: 'top top',
      pin: true,
      pinSpacing: false
    });
  }
});

특정 클래스 이름을 사용하여 패널 고정하기

gsap.utils.toArray('.parallax__item').forEach((panel, i) => {
  if (panel.classList.contains('pin-me')) { // "pin-me" 클래스를 가진 패널만 고정
    ScrollTrigger.create({
      trigger: panel,
      start: 'top top',
      pin: true,
      pinSpacing: false
    });
  }
});

데이터 속성을 사용하여 패널 고정하기

gsap.utils.toArray('.parallax__item').forEach((panel, i) => {
  if (panel.dataset.pin === 'true') { // data-pin 속성이 'true'인 패널만 고정
    ScrollTrigger.create({
      trigger: panel,
      start: 'top top',
      pin: true,
      pinSpacing: false
    });
  }
});

RECENT POSTS

[nest.js]nest.js, node.js, 프로젝트 생성 방법

Node.js 설치 Node.js의 공식 웹사이트(nodejs.org)에서 Windows용 인스톨러를 다운로드합니다. 다운로드한 인스톨러를 실행하여 설치합니다. Node Version Manager(NVM)을 사용하는 경우 nvm install node # 최신 버전 설치 nvm install 14 #...

[광주]위파크 더 센트럴 분양주택 분양안내

기본정보 공급위치: 광주광역시 서구 풍암동 10-12번지 일원 공급번호: 2023000351 공급규모: 625세대 분양/입주: 분양 2023-08-04 / 입주 2026-08 건설사: (주)호반건설 (주)라인건설 분양문의: 1670-5676 분양정보: 분양정보 자세히보기 홈페이지 주소: http://www.wepark-central.co.kr/ 모집공고문 보기 청약일정 모집공고일: 2023-08-04 청약접수: 2023-08-14...

[강원]힐스테이트 속초 분양주택 분양안내

기본정보 공급위치: 강원특별자치도 속초시 금호동 622-40 일원 공급번호: 2023000337 공급규모: 925세대 분양/입주: 분양 2023-07-21 / 입주 2026-05 건설사: 현대엔지니어링(주) 분양문의: 033-947-0925 분양정보: 분양정보 자세히보기 홈페이지 주소: http://www.hillstate-sokcho.co.kr 모집공고문 보기 청약일정 모집공고일: 2023-07-21 청약접수: 2023-07-31 ~...

GSAP와 ScrollTrigger 플러그인을 사용하여 여러 패널을 고정 시키는 방법

여러 패널 고정시키는 방법 GSAP (GreenSock Animation Platform)과 ScrollTrigger 플러그인을 사용하여 여러 패널을 스크롤 위치에 따라 고정하는 기능을 구현할 수 있습니다. <section id="section1" class="parallax__item"></section> <section id="section2"...