안녕하세요 무택입니다 :)
오늘은 스크롤 트리거에 대해 설명해보려고 합니다. 스크롤을 활용해서 웹페이지를 동적으로 만들어 줄 수 있는 라이브러리인데 너무 좋은 라이브러리라서 보시면 활용할 곳이 정말 많을 것 같습니다😊
스크롤 트리거, 왜 사용할까요?
동적인 웹 구현을 하기 위해서는 자바스크립트가 거의 필수로 들어가야 합니다. JS를 활용한 기능들 중 스크롤 위치에 따른 기능 구현이 많이 필요한데 페이지마다 자바스크립트만으로 구현하기에는 복잡하고 사용성이 떨어지기 때문에 편하게 스크롤 위치를 감지하고 기능을 넣을 수 있는 스크롤 트리거 라이브러리를 사용하면 쉽고 빠르게 동적인 기능을 만들 수 있습니다.
코드 및 설명
HTML/CSS
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/ScrollTrigger.min.js"></script>
<style>
.full_screen { width: 100%; height: 100vh; text-align: center; font-size: 2rem; line-height: 100vh; margin-top: 400px; overflow: hidden;}
.full_screen .title {display: inline-block;}
.img01_div {width: 100%; height: 500px; overflow: hidden; margin-bottom: 500px;}
.img01_div > img {width: 100%; transform-origin: center;}
</style
<div class="full_screen">
<span class="title">Txtient eldmdl</span>
</div>
<div class="img01_div">
<img src="https://images.unsplash.com/photo-1688890239467-c43da335fe7e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="">
</div>
JS
gsap.from(".title", {
scrollTrigger: {
trigger: ".full_screen", //어느 요소에 스크롤이 도착했을 때 시작할건지
start: "-20% 40%", //스크롤 트리거의 시작 기준점 설정. 앞의 값은 트리거 요소 기준(.full_screen의 상단부터 -20% 적용), 뒤의 값은 보고있는 페이지의 높이 기준.
end: "center center", //스크롤 트리거의 끝점 설정.
scrub: .5, //스크롤 바를 잡는데 걸리는 시간(움직임의 구현 속도 설정. 높을수록 느림.)
// markers: true, //기준점을 화면에 표시할지 설정.
onLeave: function(){ // 끝나는지점 callback함수
console.log('첫번째 이벤트 완료');
}
},
scale: 10,
});
gsap.from(".img01_div > img", {
scrollTrigger: {
trigger: ".img01_div",
start: "top center",
end: "bottom top",
scrub: 8,
markers: true,
},
scale: 2,
});
Codepen
See the Pen [라이브러리GSAP + ScrollTrigger 활용해보기 by TytanLee (@TytanLee) on CodePen.
설치 방법
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/ScrollTrigger.min.js"></script>`<head>``</head>`사이에 위 코드를 넣어서 cdn방식으로 설치하거나 로컬 파일을 넣어서 설치
사용 방법
준비물은 두 개의 요소가 필요합니다. 스크롤이 어느 요소(1번 클래스)에 도착했을 때 어느 요소(2번 클래스)한테 변화를 줄 것이지 설정하기 때문에 위 두 개 요소가 필요합니다.
스크롤 트리거는 쉽게 설명하자면 '스크롤이 어떤 요소(1)에 도착하면 어떤 요소(2)를 어떻게 해주세요.'입니다.
(여기서 어떤 요소(1)와 어떤 요소(2)는 같게 해도 되고 다르게 해도 됩니다.)
아래 옵션 설명에서 자세한 내용을 확인해 주세요.
스크롤 트리거는 기본적으로 아래 코드처럼 실행합니다.
gsap.from("클래스명", {
scrollTrigger: {
trigger: "클래스명",
start: "지정한-요소-기준 전체-스크롤-기준",
end: "지정한-요소-기준 전체-스크롤-기준",
},
변화 내용(scale, width 등...)
}첫 번째 줄의 클래스명은 변화를 줄 클래스명을 넣으면 됩니다. 위에서 설명한 문장에서 2번에 해당하는 요소입니다. 그리고 아래 세 번째 줄의 `trigger`에서는 1번에 해당하는 트리거의 시작 지점을 설정할 클래스명을 넣어줍니다.
그리고 그 아래 `start`나 `end`에서 디테일하게 지정한 요소의 어떤 부분까지 지정할 수 있습니다. 상단부터 `10%`라던가 중간 부분인 `center`라던가 값을 지정해 줄 수 있습니다.
위 코드를 문장으로 설명해 보자면 "스크롤의 `center`(화면의 y축 중간) 지점이`img01_div`의 `top`부분에 도착하면 `scale` 값을 2로 만들기 시작하고, 스크롤의 `top`지점이 `img01_div`의 `bottom`부분에 도착하면 모션을 다 끝내줘라" 이 의미입니다.
그리고 부가적으로 `markers` 옵션을 `true`로 설정하면 지정한 마커 부분을 볼 수 있습니다.
아래 이미지는 `start`와 `end`에 어떤 값을 넣으면 되는지에 대해 이해를 돕기 위한 이미지입니다.
추가로 사용할 수 있는 옵션으로는 `scrub`은 스크롤 바를 잡는 데 걸리는 시간으로 움직임의 구현 속도를 설정한다고 보면 됩니다. 값이 클수록 느려지게 됩니다.
`onLeave: function(){}`를 넣으면 끝나는 지점에서 콜백함수를 실행할 수 있습니다.
이렇게 GSAP의 스크롤 트리거 기능에 대해 알아봤는데 모르시는 분들에게 조금이나마 도움이 되었으면 하네요. 이해가 안 가는 부분은 댓글로 남겨주시면 최대한 아는 범위 내에서 답변드리겠습니다😊
'🧑💻개발 > 라이브러리' 카테고리의 다른 글
| [라이브러리] Locomotive Scroll 사용법: 부드러운 스크롤링으로 웹사이트를 한 단계 업그레이드 (0) | 2024.06.28 |
|---|---|
| [라이브러리]Swiper의 dot을 커스텀할 수 있는 방법 (4) | 2023.07.19 |
| [라이브러리]Slick-slider의 dot을 커스텀할 수 있는 방법 (0) | 2023.07.18 |
| [API 오류] 카카오 지도 간단하게 오류 해결 방법(VScode 라이브서버) (0) | 2023.07.03 |
| [API]카카오 지도를 간편하게 불러오는 방법 (0) | 2023.06.29 |
