본문 바로가기
728x90
300x250
SMALL

스크롤애니메이션6

GSAP을 활용한 부드러운 스크롤 효과 다음은 스크롤하면 색상이 변하는 예제이다스크롤하면 색상이 변함 box 상단 margin-top:500px과 하단 margin-bottom:300px을 설정하여 스크롤 할때 상하 간격을 만듬사용자가 스크롤을 내려서 트리거인 .box요소의 상단이 화면 중앙에 위치하면 지점에 배경색 변경(#ff6600)스크롤이 .box요소 bottom이 화면 상단에 위치하면 애니메이션이 종료된다.scrub :true 스크롤의 위치에 따라 애니메이션이 부드럽게 진행되도록 설정한다. 스크롤하면 색상이 변함">스크롤하면 색상이 변함 2025. 3. 16.
강력한 애니메이션 GSAP, 사용법과 예제 정리 GSAP(GreenSock Animation Platform)은 강력한 JavaScript 애니메이션 라이브러리로, HTML, CSS, SVG, Canvas, WebGL등의 요소를 부드럽고 효율적으로 애니메이션할 수 있도록 도와준다.  GSAP의 주요 특징1. 강력한 성능 : 일반적인 CSS 애니메이션보다 빠르고 부드럽게 작동한다.2. 다양한 애니메이션 가능 : 위치, 크기, 투명도, 색상, 회전 등 다양한 속성 애니메이션 지원3. 체이닝(Chaining)과 타임라인(Timeline) 지원 : 여러 애니메이션을 순차적으로 또는 동시에 실행 가능4. 반응형 지원 : 반응형 웹에서도 문제없이 동작5. 스크롤 애니메이션 연동 가능 : scrollTrigger 플러그인으로 스크롤 기반 애니메이션 구현 가능 1... 2025. 3. 11.
728x90
반응형
LIST