Apple 제품 페이지에 사용되는 멋진 스크롤 애니메이션 중 하나를 만들자

Apple의 제품 페이지는 부드러운 애니메이션으로 유명합니다. 예를 들어, 페이지를 아래로 스크롤하면 제품이 볼 수 있고 MacBook이 켜지고 iPhone이 회전하고 모든 것이 하드웨어를 보여주고 소프트웨어를 시연하며 제품 사용 방법에 대한 대화식 스토리를 알려줍니다.

iPad Pro Mobile Web Experience 의이 비디오를 확인하십시오.

HTML 및 CSS 만 사용하여 생성되지 않은 많은 효과가 있습니다. 그래서 당신은 물을 것입니까? 글쎄, 이것은 알아 내기가 조금 어려울 수 있습니다. 브라우저의 DevTools를 사용하더라도 일반적으로 볼 수 없기 때문에 항상 답을 공개하는 것은 아닙니다.<canvas></canvas> 요소 외부의 내용.

효과 중 하나를 파고 우리 자신의 프로젝트에서 이러한 마법 효과를 재현 할 수 있도록 그것이 어떻게 만들어 졌는지 살펴 보겠습니다. 특히 AirPods Pro Product Pages 및 Hero Images의 동적 조명 효과를 복사 해 드리겠습니다.

기본 개념

아이디어는 일련의 빠른 순위 이미지와 마찬가지로 애니메이션을 만드는 것입니다. 책을 뒤집는 것처럼 알다시피! 복잡한 WebGL 시나리오 또는 고급 JavaScript 라이브러리가 필요하지 않습니다.

각 프레임을 사용자의 스크롤 위치와 동기화하여 사용자가 페이지를 아래로 스크롤 (또는 위로)로 스크롤함에 따라 애니메이션을 재생할 수 있습니다.

태그와 스타일로 시작하십시오

이 효과에 대한 HTML 및 CSS는 마법이 발생하기 때문에 매우 간단합니다.<canvas></canvas> 요소 내부에서는 ID를 할당하여 JavaScript를 사용하여 제어합니다.

CSS에서는 문서의 높이를 100VH로 설정하고 콘텐츠 높이를 100VH보다 5 배로 설정하여 작동하는 데 필요한 스크롤 길이를 제공합니다. 또한 문서의 배경색을 이미지의 배경색과 일치시킵니다. 우리가해야 할 마지막 일은 위치입니다<canvas></canvas> 요소, 중심 및 최대 너비와 높이를 제한하여 뷰포트의 크기를 초과하지 않도록하십시오.

 <code>html { height: 100vh; } body { background: #000; height: 500vh; } canvas { position: fixed; left: 50%; top: 50%; max-height: 100vh; max-width: 100vw; transform: translate(-50%, -50%); }</code>

이제 우리는 페이지를 아래로 스크롤 할 수 있습니다 (콘텐츠가 뷰포트 높이를 초과하지 않더라도)<canvas></canvas> 여전히 뷰포트의 맨 위에 있습니다. 그것이 우리가 HTML과 CSS에 필요한 전부입니다.

이미지를 계속로드합시다.

올바른 이미지를 얻으십시오

동일한 디렉토리에서 이미지 시퀀스 (책을 뒤집는 것과 같은)를 사용하기 때문에 파일 이름이 연속적으로 오름차순으로 번호가 매겨 졌다고 가정합니다 (예 : 0001.jpg, 0002.jpg, 0003.jpg 등).

사용자의 스크롤 위치를 기반으로 원하는 이미지 파일의 경로와 수를 반환하는 함수를 작성합니다.

 <code>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` )</code>

이미지 번호는 정수이므로 문자열로 변환하고 파일 이름에 맞게 4 자리에 도달 할 때까지 인덱스에 앞서 padStart(4, '0') 사용해야합니다. 예를 들어,이 함수로 1을 전달하면 0001이 반환됩니다.

이것은 우리에게 이미지 경로를 처리하는 방법을 제공합니다. 이것은<canvas></canvas> 요소에 그려진 순서의 첫 번째 이미지 :

보시다시피, 첫 번째 이미지는 페이지에 있습니다. 이 시점에서 그것은 단지 정적 파일 일뿐입니다. 우리가 원하는 것은 사용자의 스크롤 위치를 기반으로 업데이트하는 것입니다. 하나의 이미지 파일을로드하고 싶을뿐만 아니라 다른 이미지 파일을로드하여 교체합니다. 우리는 희망합니다<canvas></canvas> 이미지를 맨 위에 그려서 다음 이미지로 순서로 도면을 업데이트하십시오 (그러나 나중에 논의하겠습니다).

우리는 전달한 숫자를 기반으로 이미지 파일의 경로를 생성하는 함수를 만들었으므로 지금해야 할 일은 사용자의 스크롤 위치를 추적하고 해당 스크롤 위치에 해당하는 이미지 프레임을 결정하는 것입니다.

이미지를 사용자의 스크롤 진행 진행에 연결하십시오

순서대로 통과 해야하는 숫자 (그리고로드하려는 이미지)를 이해하려면 사용자의 스크롤 진행 상황을 계산해야합니다. 이벤트 리스너를 만들어 이벤트를 추적하고 수학적 계산을 처리하여로드 할 이미지를 계산합니다.

우리는 알아야합니다.

• 스크롤이 시작되고 끝나는 곳
• 사용자 스크롤링 진행 (즉, 페이지의 스크롤링 비율)
• 사용자 스크롤링 진행 상황에 해당하는 이미지

scrollTop 사용하여 요소의 수직 스크롤 위치,이 경우 문서의 맨 위에 있습니다. 이것은 시작 값으로 사용됩니다. 문서 스크롤 높이에서 창 높이를 빼서 끝 (또는 최대) 값을 얻을 수 있습니다. 여기에서 scrollTop 값을 사용자가 아래로 스크롤 할 수있는 최대 값으로 나누어 사용자의 스크롤 진행 상황을 제공합니다.

그런 다음 해당 위치에 대한 올바른 이미지를 반환하기 위해 해당 스크롤 진행 상황을 이미지 번호 시퀀스에 해당하는 인덱스 번호로 변환해야합니다. 진행 횟수에 진행된 프레임 수 (이미지 수)를 곱하여이를 수행 할 수 있습니다. Math.floor() 사용하여 해당 숫자를 반올림하고 Math.min() 과 최대 프레임 수로 랩하여 총 프레임 수를 초과하지 않도록합니다.

 <code>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) ); });</code>

올바른 이미지로 업데이트하십시오<canvas></canvas>

이제 사용자의 스크롤 진행 상황이 변경 될 때 어떤 이미지를 그릴 것인지 알 수 있습니다. 이것은<canvas></canvas> 마법이 작동하는 곳.<canvas></canvas> 게임과 애니메이션에서 디자인 모델 생성기에 이르기까지 모든 것을 구축 할 수있는 멋진 기능이 많이 있습니다!

이러한 기능 중 하나는 requestAnimationFrame 이라는 메소드로, 브라우저와 함께 업데이트 할 수 있습니다.<canvas></canvas> , 우리가 대신 직접 이미지 파일을 사용하는 경우<canvas></canvas> , 우리는 이것을 할 수 없습니다. 이것이 나의 선택입니다<canvas></canvas> 예를 들어 대신 방법 img 요소 또는 배경 이미지<div> 이유. <code>requestAnimationFrame WebGL을 사용하여 장치의 비디오 카드 또는 통합 그래픽 카드로 렌더링하여 브라우저 새로 고침 속도와 일치하고 하드웨어 가속을 활성화합니다. 다시 말해, 우리는 이미지가 깜박 거리는 프레임 사이의 매우 원활한 전환을 얻을 것입니다!

사용자가 페이지를 위 또는 아래로 스크롤 할 때 스크롤 이벤트 리스너 에서이 기능을 Exchange Images로 호출하겠습니다. requestAnimationFrame 콜백 매개 변수를 사용하므로 이미지 소스를 업데이트하는 기능을 전달하고<canvas></canvas> 새로운 이미지를 그립니다.

 <code>requestAnimationFrame(() => updateImage(frameIndex 1))</code>

이미지 시퀀스가 ​​0001.jpg에서 시작하는 동안 스크롤 진행 상황 계산은 실제로 0에서 시작하기 때문에 frameIndex 1만큼 증가시킵니다. 이렇게하면 두 값이 항상 정렬되도록합니다.

업데이트 이미지로 전달하는 콜백 기능은 다음과 같습니다.

 <code>const updateImage = index => { img.src = currentFrame(index); context.drawImage(img, 0, 0); }</code>

우리는 frameIndex 함수로 전달합니다. 이것은 다음 이미지를 순서로 사용하여 이미지 소스를 설정합니다.<canvas></canvas> 요소에.

사전로드 이미지가 더 좋습니다

기술적으로, 우리는 지금 끝났습니다. 그러나 제발, 우리는 더 잘할 수 있습니다! 예를 들어 빠른 스크롤은 이미지 프레임 사이에 약간의 지연이 발생할 수 있습니다. 각각의 새로운 이미지는 새로운 다운로드가 필요한 새로운 네트워크 요청을 보내기 때문입니다.

새로운 네트워크 요청으로 이미지를 사전로드하려고 노력해야합니다. 이런 식으로 각 프레임이 다운로드되어 전환이 더 빠르고 애니메이션이 더 부드럽습니다!

우리가해야 할 일은 전체 이미지 시퀀스를 루프하고로드하는 것입니다.

 <code>const frameCount = 148; const preloadImages = () => { for (let i = 1; i </code>

데모!

성능에 대한 빠른 설명

이 효과는 매우 시원하지만 많은 이미지이기도합니다. 정확히 말하면 148 조각입니다.

이미지를 최적화하는 방법이나 CDN이 얼마나 빨리 제공하든 수백 개의 이미지를로드하면 항상 페이지가 부풀어 오릅니다. 같은 페이지 에서이 기능을 여러 번 사용한다고 가정 해 봅시다. 다음과 같은 성능 통계를받을 수 있습니다.

이는 고속 인터넷 연결 및 낮은 데이터 캡을 가진 사용자에게는 적합하지만이 편의가없는 사용자에게는 말할 수 없습니다. 균형을 맞추기 어려운 문제이지만, 우리는 모든 사람의 경험에주의를 기울여야합니다. 그리고 우리의 결정이 그들에게 어떤 영향을 미치는지.

이 균형을 달성하기 위해 우리가 할 수있는 몇 가지가 있습니다.

 <code>- 加载单个后备图像而不是整个图像序列- 为某些设备创建使用较小图像文件的序列- 允许用户启用序列，也许可以使用启动和停止序列的按钮苹果采用第一种方法。如果您在连接到缓慢的3G 连接的移动设备上加载AirPods Pro 页面，那么，性能统计数据开始看起来好多了：是的，它仍然是一个繁重的页面。但它比我们根本没有任何性能考虑的情况下要轻得多。这就是苹果能够将如此多的复杂序列放到单个页面上的方式。 #### 进一步阅读如果您有兴趣了解这些图像序列是如何生成的，一个好的起点是AirBnB 的Lottie 库。文档将引导您完成使用After Effects 生成动画的基础知识，同时提供一种在项目中轻松包含它们的方法。</code>