x6tri3n0g / interactive-scroll-web

더 쉽고 편하게 만드는 3D 인터랙티브 웹 개발 : 구현부터 최적화까지 (feat. R3F & Three.js)

환경

• node: 16.16

부록 - 스크롤 애니메이션

• 개발환경 구현

  • 프로젝트 설명
  • 웹팩 설정

• 스크롤 비디오 제어

  • 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