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

[css]autoprefixer: end value has mixed support, consider using flex-end instead warning 처리 및 다양한 에러 메시지 의미

이 경고 메시지는 CSS를 처리하는 도구인 Autoprefixer가 justify-content: end; 속성값을 처리하려 할 때 발생합니다. Autoprefixer는 CSS에 벤더 접두사를 자동으로 추가해 주는 도구로, 다양한 브라우저에서 CSS 속성이...

[javascript]Math.min, Math.max 사용방법

Math.min과 Math.max는 JavaScript의 Math 객체에서 제공하는 메서드로, 각각 주어진 숫자들 중 최소값과 최대값을 반환합니다. 이 메서드들은 다양한 수학 연산과 데이터 처리에서 유용하게 사용될 수...

널 병합 연산자 Nullish coalescing operator (??) 에 대해서 알아보자.

널 병합 연산자 Nullish coalescing operator (??)는 JavaScript에서 null이나 undefined 값을 체크하는 데 사용되는 연산자입니다. 이 연산자는 좌변의 피연산자가 null 또는 undefined일 경우 우변의 피연산자를 반환하고, 그렇지 않은 경우 좌변의...

[css]부모 요소의 border-radius가 자식 요소의 background-color로 가려지지 않도록 설정할 수 있는 방법

overflow: hidden 속성 사용 부모 요소의 border-radius를 자식 요소의 background-color로 가려지지 않도록 설정해야 합니다. 이를 위해 부모 요소에 overflow: hidden; 속성을 추가하여 자식 요소의 배경이...