728x90
300x250
SMALL
다음은 스크롤하면 색상이 변하는 예제이다
<div class="box">스크롤하면 색상이 변함</div>
<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.to(".box", {
backgroundColor: "#ff6600", // 애니메이션에 의해 바뀔 색상
scrollTrigger: {
trigger: ".box", // 애니메이션이 시작될 요소
start: "top center", // 화면 상단이 요소의 중앙에 올 때 애니메이션 시작
end: "bottom top",// 요소 하단이 화면 상단에 올 때 애니메이션 종료
scrub: true, // 스크롤에 맞춰 애니메이션을 스크럽(동기화)하게 함
}
});
</script>
<style>
.box { width: 100%; height: 300px; background: lightblue; margin-top: 500px;margin-bottom: 300px; }
</style>
- box 상단 margin-top:500px과 하단 margin-bottom:300px을 설정하여 스크롤 할때 상하 간격을 만듬
- 사용자가 스크롤을 내려서 트리거인 .box요소의 상단이 화면 중앙에 위치하면 지점에 배경색 변경(#ff6600)
- 스크롤이 .box요소 bottom이 화면 상단에 위치하면 애니메이션이 종료된다.
- scrub :true 스크롤의 위치에 따라 애니메이션이 부드럽게 진행되도록 설정한다.
스크롤하면 색상이 변함
728x90
반응형
LIST
'Front-end > 애니메이션' 카테고리의 다른 글
Lottie(로띠) 활용법, JSON 애니메이션을 웹에 추가하는 법 (0) | 2025.03.12 |
---|---|
강력한 애니메이션 GSAP, 사용법과 예제 정리 (0) | 2025.03.11 |
마이크로 인터랙션 (0) | 2025.03.09 |
댓글