https://github.com/chuhongkyu/fastcampus-appendix
더 쉽고 편하게 만드는 3D 인터랙티브 웹 개발 : 구현부터 최적화까지 (feat. R3F & Three.js)
https://github.com/chuhongkyu/fastcampus-appendix
fastcampus scrollanimation
Last synced: 5 months ago
JSON representation
더 쉽고 편하게 만드는 3D 인터랙티브 웹 개발 : 구현부터 최적화까지 (feat. R3F & Three.js)
- Host: GitHub
- URL: https://github.com/chuhongkyu/fastcampus-appendix
- Owner: chuhongkyu
- Created: 2023-09-30T07:57:55.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-06-22T04:45:37.000Z (about 2 years ago)
- Last Synced: 2025-07-07T10:35:11.127Z (12 months ago)
- Topics: fastcampus, scrollanimation
- Language: HTML
- Homepage:
- Size: 296 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 더 쉽고 편하게 만드는 3D 인터랙티브 웹 개발 : 구현부터 최적화까지 (feat. R3F & Three.js)
## 부록 - 스크롤 애니메이션
- 개발환경 구현
- 프로젝트 설명
- 웹팩 설정
- 스크롤 비디오 제어
- video 파일 스크롤 제어
- canvas 이미지 스크롤 제어
- 영상을 이미지로 추출하는 법
- 스크롤 이벤트 추가
- gsap 스크롤 이벤트 추가
- 스크롤 트리거 예제와 함께 섹션1 구현 (타이틀 나타내기)
- 스크롤 트리거 예제와 함께 섹션2 구현 (제품 설명)
- 스크롤 트리거 예제와 함께 섹션3 구현 (아이콘 띄우기)
- 스크롤 트리거 예제와 함께 섹션4 구현 (고정 요소 만들기)
- 해더, 푸터 스크롤 이벤트 구현
- 반응형 및 최적화
- 이미지 캐싱
- 모바일 반응형 추가
```
npm inity -y
npm install webpack-dev-server --save-dev
npm install html-webpack-plugin --save-dev
npm install copy-webpack-plugin --save-dev
npm install --save-dev cross-env
npm i gsap
```