스크롤 애니메이션 (애플)

참고 사이트

1. 미리 모든 이미지 프레임들을 로드한다. => 이미지 로딩시 발생할 수 있는 부자연을 제거할 수 있다

const preloadImages = () => {
  for (let i = 1; i < frameCount; i++) {
    const img = new Image();
    img.src = currentFrame(i);
  }
};


preloadImages();

2. requestAnimation을 이용해 매 프레임마다 Image를 레더링 시켜준다.

requestAnimationFrame(() => updateImage(frameIndex + 1))

3. 스크롤 이벤트를 등록해 준다

window.addEventListener('scroll', () => {  
  const scrollTop = html.scrollTop;
  const maxScrollTop = html.scrollHeight - window.innerHeight;
  const scrollFraction = scrollTop / maxScrollTop;
  const frameIndex = Math.min(
    frameCount - 1,
    Math.floor(scrollFraction * frameCount)
  );
});

4. 나머지 필요한 함수

const updateImage = index => {
   context.drawImage(img, 0, 0);
}

const currentFrame = index => (
  `https://www.apple.com/105/media/us/airpods-pro/2019/1299e2f5_9206_4470_b28e_08307a42f19b/anim/sequence/large/01-hero-lightpass/${index.toString().padStart(4, '0')}.jpg`
)