728x90 300x250 SMALL 부드러운 스크롤3 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. 부드러운 페이지 스크롤 적용하기 smooth scroll :: 제이쿼리 부드럽게 내려가는 스크롤 스크립트 구하는 것은 어렵지 않다. 검색창에 smooth scroll이라고만 쳐도 많은 정보를 얻을 수 있다. https://idiotwu.github.io/smooth-scrollbar/ https://github.com/kswedberg/jquery-smooth-scroll 나는 그 중에서 github에서 다운 받은 부드러운 스크롤을 적용해봤다.위 주소에서 받을 수 있다. 압축된 파일을 풀어보면 demo폴더가 있다.거기서 index를 열어보면 위와 같은 화면이 p1버튼을 눌러 부드럽게 내려가는 것을 확인 할 수 있다.그래서 이 파일과 연결된 파일 12345678910111213141516 $(document).ready(function() { $('body').smoothSc.. 2018. 12. 6. 이전 1 다음 728x90 반응형 LIST
