728x90 300x250 SMALL 애니메이션 효과2 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. 패럴랙스(Parallax) 효과란? 패럴랙스(Parallax) 효과는 웹 디자인에서 배경과 전경(콘텐츠 요소)이 서로 다른 속도로 움직이는 시각적 기법을 위미한다. 이를 통해 화면에 깊이감을 주고, 마치 3D처럼 보이게 만드는 효과이다.패럴랙스의원리패럴랙스 효과는 시차(parallax)원리를 이용한다. 즉, 사용자가 페이지를 스크롤할 때,배경 이미지 천천히 움직이고앞쪽 콘텐츠는 더 빠르게 움직임이 차이로 인해 입체감과 부드러운 동적 경험을 제공하게 된다.패럴랙스 효과의 종류스크롤 기반 패럴랙스사용자가 스크롤을 내리면 배경과 요소가 다른 속도로 움직인다.가장 많이 사용되는 패럴랙스 방식예시) 배경 이미지는 천천히 내려가고, 텍스트나 버튼은 빠르게 움직인다.마우스 기반 패럴랙스마우스 커서를 움직일 때 배경과 요소가 다르게 반응하는 효과게임, .. 2025. 3. 28. 이전 1 다음 728x90 반응형 LIST