본문 바로가기
728x90
300x250
SMALL

스크롤애니메이션7

스크롤 특정 위치에 도달 하면 JS 함수 실행하기 [GSAP] 이번에는 스크롤로 특정 영역 도달 시 단순히 애니메이션 효과를주는게 아님 함수를 실행하는 방법을 알아보겠습니다. 스크롤 내려주세요 ↓ 트리거 영역 gsap.registerPlugin(ScrollTrigger) : GSAP은 기본적으로 core 기능만 포함되어 있고 ScrollTrigger 같은 확장 플러그인은 별도로 등록해야 사용 가능하다, 이 명령으논 ScrollTrigger를 GSAP 안에서 사용할 수 있게 등록해주는 명령어이다.trigger : 이 트리거 요소가 기준이 된다. 즉 여기서는 .trigger-zone 요소가 스크롤 지점 감지의 기준점이 된다,start : top 80%는 트리거 요소의 top이 브라우저 화면의 80%지점에 닿을 때 실행하라는 뜻이다.onEnter.. 2025. 6. 15.
ScrollTrigger 이해하기: 핵심 개념 및 기능 분석 ScrollTrigger는 사용자가 페이지를 스크롤 할때 발생하는 이벤트를 바탕으로 애니메이션을 제어할 수 있다.이 플러그인을 사용하면 스크롤 위치에 따른 다양한 트리거를 설정할 수 있으며, 효과적인 애니메이션 연출이 가능하다. ScrollTrigger 주요 속성trigger : 애니메이션을 실행할 요소를 지정한다.start, end: 애니메이션의 시작과 끝을 스크롤 위치로 설정한다.scrub : 스크롤 속도에 따라 애니메이션을 동기화한다.pin : 요소를 화면에 고정하여 스크롤 동안 화면에 유지할 수 있다.toggleActionss : 애니메이션의 상태를 제어한다.gsap.to(".box", { x: 500, duration: 2, scrollTrigger: { trigger: ".box",.. 2025. 4. 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.
728x90
반응형
LIST