여러 패널 고정시키는 방법
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
})
})- 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
});
}
});