ScrollTrigger Archives | Market Traders

WordPress database error: [Disk full (/tmp/#sql_1_0.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")]
SHOW FULL COLUMNS FROM `wp_options`

워드프레스 데이터베이스 오류: [Disk full (/tmp/#sql_1_0.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")]
SHOW FULL COLUMNS FROM `wp_options`

워드프레스 데이터베이스 오류: [Disk full (/tmp/#sql_1_0.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")]
SHOW FULL COLUMNS FROM `wp_itsec_logs`

워드프레스 데이터베이스 오류: [Disk full (/tmp/#sql_1_0.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")]
SHOW FULL COLUMNS FROM `wp_options`

워드프레스 데이터베이스 오류: [Disk full (/tmp/#sql_1_0.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")]
SHOW FULL COLUMNS FROM `wp_wflivetraffichuman`

워드프레스 데이터베이스 오류: [Disk full (/tmp/#sql_1_0.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")]
SHOW FULL COLUMNS FROM `wp_options`

ScrollTrigger Archives | Market Traders https://markettraders.kr/tag/scrolltrigger/ Sat, 12 Aug 2023 06:59:03 +0000 ko-KR hourly 1 https://wordpress.org/?v=6.7.5 GSAP와 ScrollTrigger 플러그인을 사용하여 여러 패널을 고정 시키는 방법 https://markettraders.kr/gsap-scrolltrigger-panel-pin/ Sat, 12 Aug 2023 06:53:04 +0000 https://markettraders.kr/?p=5110 여러 패널 고정시키는 방법 GSAP (GreenSock Animation Platform)과 ScrollTrigger 플러그인을 사용하여 여러 패널을 스크롤 위치에 따라 고정하는 기능을 구현할 수 있습니다. 결과적으로, 이 코드는 .parallax__item 클래스를 가진 각 패널에 대해 스크롤 위치에 따라 고정 효과를 적용합니다. 패널이 뷰포트 상단에 도달하면 고정되고, 다음 패널이 도달하면 그 다음 패널이 고정되는 식입니다. 원하는 패널만 고정시키는 방법 원하는 패널만 […]

The post GSAP와 ScrollTrigger 플러그인을 사용하여 여러 패널을 고정 시키는 방법 appeared first on Market Traders.

]]> 여러 패널 고정시키는 방법

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

<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
    })
})

gsap.utils.toArray(‘.parallax__item’): .parallax__item 클래스를 가진 모든 DOM 요소를 선택하여 배열로 변환합니다. toArray 메서드는 CSS 선택자, NodeList, 배열 등을 배열로 변환합니다. 이를 통해 쉽게 반복 작업을 수행할 수 있습니다.
.forEach((panel, i) => { … }): 반환된 배열에 대해 forEach 메서드를 사용하여 각 패널에 대해 반복 작업을 수행합니다. 여기서 panel은 현재 패널 요소를 나타내며, i는 인덱스를 나타냅니다.
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
    });
  }
});

The post GSAP와 ScrollTrigger 플러그인을 사용하여 여러 패널을 고정 시키는 방법 appeared first on Market Traders.

]]>