728x90
300x250
SMALL
이번에는 스크롤로 특정 영역 도달 시 단순히 애니메이션 효과를주는게 아님 함수를 실행하는 방법을 알아보겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>GSAP ScrollTrigger - 함수 실행</title>
<style>
body {
margin: 0;
font-family: sans-serif;
}
.spacer {
height: 100vh;
background: #f0f0f0;
}
.trigger-zone {
height: 300px;
background: #4caf50;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
}
</style>
</head>
<body>
<div class="spacer">스크롤 내려주세요 ↓</div>
<div class="trigger-zone">트리거 영역</div>
<div class="spacer"></div>
<!-- GSAP & ScrollTrigger CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
<script>
gsap.registerPlugin(ScrollTrigger);
// 실행할 함수
function myCustomFunction() {
alert("지정한 영역에 도달했습니다!");
console.log("스크롤 트리거 함수 실행됨");
// 여기에 원하는 JS 함수 실행 가능 (ex. ajax 호출, 데이터 로딩, 모달 열기 등)
}
// ScrollTrigger 설정
ScrollTrigger.create({
trigger: ".trigger-zone",
start: "top 80%", // trigger 요소의 top이 뷰포트의 80% 지점에 도달할 때
onEnter: myCustomFunction, // 함수 실행
once: true // 한 번만 실행되도록
});
</script>
</body>
</html>- gsap.registerPlugin(ScrollTrigger) : GSAP은 기본적으로 core 기능만 포함되어 있고 ScrollTrigger 같은 확장 플러그인은 별도로 등록해야 사용 가능하다, 이 명령으논 ScrollTrigger를 GSAP 안에서 사용할 수 있게 등록해주는 명령어이다.
- trigger : 이 트리거 요소가 기준이 된다. 즉 여기서는 .trigger-zone 요소가 스크롤 지점 감지의 기준점이 된다,
- start : top 80%는 트리거 요소의 top이 브라우저 화면의 80%지점에 닿을 때 실행하라는 뜻이다.
- onEnter : 트리거 조건에 도달했을 때 실행할 사용자 정의 함수
- once:true : true일 경우 한 번만 실행된다.(스크롤로 다시 돌아와도 재실행 안 됨 / 반복해서 실행하고 싶다면 이 옵션 제거)
스크롤 내려주세요 ↓
트리거 영역
728x90
반응형
LIST
'Front-end > gsap' 카테고리의 다른 글
| [GSAP + ScrollTrigger] 스크롤 하면 애니메이션 실행 (0) | 2025.05.29 |
|---|---|
| ScrollTrigger 이해하기: 핵심 개념 및 기능 분석 (0) | 2025.04.05 |
| ScrollTrigger로 요소를 부드럽게 움직이는 방법 (0) | 2025.03.31 |
| Gsap ScrollTrigger 처음 설치 및 기본 설정 방법 (0) | 2025.03.30 |
| gsap pin효과 - 비 (0) | 2025.03.29 |
댓글