본문 바로가기
728x90
300x250
SMALL

스크롤애니메이션5

GSAP ScrollTrigger Snap 기능 가이드 gsap의 snap 옵션은 스크롤 애니메이션에서 특정 지점에 자동으로 정렬되도록 해주는 기능이다. 주로 ScrollTrigger와 함께 사용하며 , 특정 지점(예 섹션 단위)에서 스냅이 걸려 자연스럽게 정렬된다.snap 기본 사용법scrollTrigger: { snap: [0, 0.5, 1] // 스크롤 진행 정도(0%, 50%, 100%)에서 스냅} 이 경우 스크롤 시 0%, 50%, 100%의 위치에서 자동으로 멈추게 된다.snap 사용 방식 3가지1. 배열 방식snap: [0, 0.33, 0.66, 1] // 4개 섹션이 있다면 각각 0%, 33%, 66%, 100%에서 스냅 특정 지점으로 스냅을 걸고 싶을 때 사용 2. 비율 값 방식snap: 1 / 3 // 3개의 섹션이므로 33.3% 간격.. 2025. 3. 27.
스크롤에 따른 반응형 인터랙션 만들기 스크롤 이벤트를 이용하여 사용자가 페이지를 스크롤할 때마다 화면에 변화가 생기는 반은형 애니메이션을 만들ㅇ보자  Section 1 Section 2 Section 3  코드 설명스크롤 시 각 섹션이 화면에 보일 때마다 서서히 나타나는 효과를 구현addEventListener는 이벤트 리스너를 추가하는 메서드로 이 메서드를 사용하면 브라우저가 특정 이벤트(예: 클릭, 스크롤 등)를 감지할 때마다 실행될 함수를 지정할 수 있다. 여기서는 scroll이벤트를 감지해서 페이지를 스크롤할 때마다 해당 함수가 실행되도록 설정getBoundingClientRect()는 요소의 위치와 크기를 반환하는 메서드로 요소의 상대적인 위치와 현재 뷰포트에 대한 크기를 알려준다. 이 메서드를 사용하여 각 섹션의위치를 파악.. 2025. 3. 21.
GSAP와 ScrollTrigger로 부드러운 스크롤 애니메이션 만들기 GSAP란?GSAP는 자바스크립트를 기반으로 한 애니메이션 라이브러리이다. 고성능, 간편한 API, 다양한 애니메이션 효과를 제공하며, 많은 웹사이트에서 사용되고 있다.ScrollTrigger란?ScrollTrigger는 GSAP의 플러그인으로, 스크롤 위치를 기반으로 애니메이션을 트리거할 수 있다.이를 통해 스크롤에 따라 애니메이션이 자연스럽게 동작하도록 설정할 수 있다. 1. 기본 html 구조Section 1Section 2Section 3Section 4 위의 html 코드는 4개의 섹션을 생성하는 구조이다. 각 섹션은 100vh(뷰포트 높이)를 차지하며, 페이지를 스크롤하면서 애니메이션을 적용할 대상이 된다.2. CSS 스타일링.section { height: 100vh; display: f.. 2025. 3. 17.
GSAP을 활용한 부드러운 스크롤 효과 다음은 스크롤하면 색상이 변하는 예제이다스크롤하면 색상이 변함 box 상단 margin-top:500px과 하단 margin-bottom:300px을 설정하여 스크롤 할때 상하 간격을 만듬사용자가 스크롤을 내려서 트리거인 .box요소의 상단이 화면 중앙에 위치하면 지점에 배경색 변경(#ff6600)스크롤이 .box요소 bottom이 화면 상단에 위치하면 애니메이션이 종료된다.scrub :true 스크롤의 위치에 따라 애니메이션이 부드럽게 진행되도록 설정한다. 스크롤하면 색상이 변함">스크롤하면 색상이 변함 2025. 3. 16.
728x90
반응형
LIST