728x90 300x250 SMALL 2025/0330 ScrollTrigger로 요소를 부드럽게 움직이는 방법 ScrollTrigger의 기본적인 사용방법을 예제로 익혀보자. 가장 간단한 방법은 특정 요소가 화면에 보일 때 애니메이션을 실행하는 것이다. gsap.to(".box", { x: 500, // 오른쪽으로 500px 이동 duration: 2, scrollTrigger: { trigger: ".box", // 트리거 요소 지정 start: "top 80%", // 시작 위치 end: "top 20%", // 종료 위치 scrub: true, // 스크롤과 애니메이션을 동기화 }}); 2025. 3. 31. 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. 이전 1 2 3 4 ··· 8 다음 728x90 반응형 LIST