728x90 300x250 SMALL 전체 글1163 GSAP와 ScrollTrigger로 부드러운 스크롤 애니메이션 만들기 GSAP란?GSAP는 자바스크립트를 기반으로 한 애니메이션 라이브러리이다. 고성능, 간편한 API, 다양한 애니메이션 효과를 제공하며, 많은 웹사이트에서 사용되고 있다.ScrollTrigger란?ScrollTrigger는 GSAP의 플러그인으로, 스크롤 위치를 기반으로 애니메이션을 트리거할 수 있다.이를 통해 스크롤에 따라 애니메이션이 자연스럽게 동작하도록 설정할 수 있다. 1. 기본 html 구조Section 1Section 2Section 3Section 4 위의 html 코드는 4개의 섹션을 생성하는 구조이다. 각 섹션은 100vh(뷰포트 높이)를 차지하며, 페이지를 스크롤하면서 애니메이션을 적용할 대상이 된다.2. CSS 스타일링.section { height: 100vh; display: f.. 2025. 3. 17. GSAP을 활용한 부드러운 스크롤 효과 다음은 스크롤하면 색상이 변하는 예제이다스크롤하면 색상이 변함 box 상단 margin-top:500px과 하단 margin-bottom:300px을 설정하여 스크롤 할때 상하 간격을 만듬사용자가 스크롤을 내려서 트리거인 .box요소의 상단이 화면 중앙에 위치하면 지점에 배경색 변경(#ff6600)스크롤이 .box요소 bottom이 화면 상단에 위치하면 애니메이션이 종료된다.scrub :true 스크롤의 위치에 따라 애니메이션이 부드럽게 진행되도록 설정한다. 스크롤하면 색상이 변함">스크롤하면 색상이 변함 2025. 3. 16. Node.js란? 설치 및 설정 방법! Node.js는 Chrome V8 JavaScript 엔진을 기반으로 한 서버 사이드 런 타임이다.기존의 브라우저 환경에서만 사용되던 JavaScript를 서버에서도 실행할 수 있게 만들어졌다. Node.js의 주요 특징비동기 & 이벤트 기반싱글 스레드 아키텍처npm(Node Package Manager)을 통한 수많은 라이브러리 활용 가능Node.js 설치 방법(Window 기준)Node.js 공식 사이트에서 LTS 버전 다운로드설치 후 node -v와 npm -v로 정상 설치 확인간단한 Node.js 코드 실행console.log("Hello, Node.js!"); 2025. 3. 15. Git Bash 설치 후 VS Code에서 실행 Git Bash 설치 방법1. Git Bash 다운로드 후 설치https://git-scm.com/ Git git-scm.com 2. 설치 과정에 중요 옵션 체크기본 편집기 선택VS Code를 쓰려면 Use Visual Studio Code as Git's default editor선택 3. PATH 환경변수 설정옵션2(Git from the commend line and also from 3rd-party software) 선택 이걸 선택해야 VS Code에서도 Git Bash 명령어 사용 가능 4. 터미널 선택기본값 MitTTY 그대로 둬도 되고, Windows 기본 터미널을 쓰려면 Use Windows default console window 선택 나머지 옵션은 기본값 선택 Git Bash 자.. 2025. 3. 14. 이전 1 2 3 4 5 6 7 ··· 291 다음 728x90 반응형 LIST
