본문 바로가기
728x90
300x250
SMALL

웹개발15

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.
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.
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.
ES6 모듈 시스템 : import/export를 활용한 최신 개발 방법 ES6 모듈이란?ES6 모듈 시스템은 JavaScript 파일을 독립적인 모듈로 나누어 관리할 수 있도록 해주는 기능이다.즉, 코드를 여러 개의 파일로 나눠서 필요할 때만 불러오는 방식 기존에는 script태그를 여러 개 추가하거나, require.js, CommonJS등을 사용했지만, ES6부터는 표준을 내장된 import / export 문법을 사용할 수 있다. ES6 모듈의 기본 문법1) 모듈에서 export 하기// math.jsexport function add(a, b) { return a + b;}export const PI = 3.14; 2) import 해서 사용하기// main.jsimport { add, PI } from "./math.js";console.log(add(2, 3)).. 2025. 3. 13.
728x90
반응형
LIST

티스토리툴바