본문 바로가기
728x90
300x250
SMALL

전체 글1163

Gsap ScrollTrigger 처음 설치 및 기본 설정 방법 개념 설명ScrollTrigger를 사용하려면 먼저 GSAP과 ScrollTrigger 플러그인을 로드해야 한다.  설치 방법1) CDN 방식 2) npm 설치Node.js 환경에서 사용하려면 npm으로 설치할 수 있다.npm install gsap 이후 JavsScript 파일에서 플러그인을 등록해야 한다.import gsap from "gsap";import ScrollTrigger from "gsap/ScrollTrigger";gsap.registerPlugin(ScrollTrigger); 기본예제 만들어보기 Scroll to Animate  // 대상(.animate-box)선택하고 중괄호에 움직임을 준다.x축으로 500px 움직임실행결과   Scroll to A.. 2025. 3. 30.
gsap pin효과 - 비 보호되어 있는 글 입니다. 2025. 3. 29.
패럴랙스(Parallax) 효과란? 패럴랙스(Parallax) 효과는 웹 디자인에서 배경과 전경(콘텐츠 요소)이 서로 다른 속도로 움직이는 시각적 기법을 위미한다. 이를 통해 화면에 깊이감을 주고, 마치 3D처럼 보이게 만드는 효과이다.패럴랙스의원리패럴랙스 효과는 시차(parallax)원리를 이용한다. 즉, 사용자가 페이지를 스크롤할 때,배경 이미지 천천히 움직이고앞쪽 콘텐츠는 더 빠르게 움직임이 차이로 인해 입체감과 부드러운 동적 경험을 제공하게 된다.패럴랙스 효과의 종류스크롤 기반 패럴랙스사용자가 스크롤을 내리면 배경과 요소가 다른 속도로 움직인다.가장 많이 사용되는 패럴랙스 방식예시) 배경 이미지는 천천히 내려가고, 텍스트나 버튼은 빠르게 움직인다.마우스 기반 패럴랙스마우스 커서를 움직일 때 배경과 요소가 다르게 반응하는 효과게임, .. 2025. 3. 28.
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.
728x90
반응형
LIST