360° 제품 보기

나는 항상 페이지 스크롤에서 독특한 방식으로 제품을 보여주는 웹 사이트에 깊은 인상을 받았습니다. 전환, 페이드, 워프, 확대/축소 등. 제가 시도하고 싶은 매우 특별한 애니메이션 중 하나는 스크롤에서 제품의 360도 회전입니다.

Nuro에서 이와 같이



그것은 제품의 완전한 360보기를 제공합니다.

Nuro 구현

측면을 약간 파헤친 후 웹 사이트에서 차량의 전체 보기를 생성하는 데 필요한 모든 이미지를 다운로드하는 것을 볼 수 있습니다. 그것은 많은 이미지, 정확히 127개의 이미지입니다.



그리고 이 이미지들을 캔버스에 불러와 애니메이션을 만듭니다. 간단히 말해서 더 쉬운 솔루션을 원합니다.

그러더니 번뜩였지 Sprite sheet

스프라이트 시트

스프라이트 시트를 사용하여 제품의 360도 뷰를 완성하는 데 필요한 모든 개별 프레임이 포함된 단일 이미지 파일을 로드할 수 있습니다.

More on spritesheets

누군가가 이미 스프라이트 시트 방법을 생각해 냈기를 바라며 다음 작업은 자동차의 관련 스프라이트 시트를 찾는 것이었습니다.

Found one

이제 애니메이션을 시작하겠습니다.

개념

아이디어는 간단하며 영화가 시작된 이래로 사용되었습니다. 전체 이미지의 특정 부분만 볼 수 있는 보기 창을 만들고 스크롤할 때마다 새 프레임을 보기로 이동하여 360 보기 효과를 만듭니다.

빨간색 상자를 당시에 보이는 유일한 부분으로 생각하고 각 스크롤 단계에서 이미지를 이동합니다.

구현

먼저 알아야 할 것은 개별 이미지의 높이와 너비입니다.
여기서 각 프레임에 사용된 이미지는
높이 : 600px
폭 : 350px

div를 만들고 높이와 너비와 함께 배경을 이미지로 설정해 보겠습니다. 또한 스크롤할 수 있도록 본문의 높이를 설정하겠습니다.

body {
    height: 2000px;
}

#car {
    width: 600px;
    height: 350px;
    position: fixed;
    background: transparent url(https://www.cssscript.com/demo/product-viewer-animate-sprite/car.jpg);
  }

그러면 CSS가 완성됩니다.

자바 스크립트 부분으로 넘어 갑시다

먼저 사용할 html 요소, 자동차 이미지를 포함하는 div 및 디버깅에 사용할 카운터(구현에 필요하지 않음)를 쿼리 선택합니다.

const car = document.querySelector("#car");

// only used for debugging
const countIndicator = document.querySelector(".counter");

다음으로 단일 이미지의 높이와 너비, 전체 이미지에서 개별 이미지(스프라이트)의 수가 필요합니다. 이 경우에는 61입니다. 이는 끝에 도달했을 때 첫 번째 이미지로 루프백할 수 있도록 하기 위한 것입니다. .

모든 이미지가 같은 줄에 있었다면 작업이 더 쉬웠을 것입니다. 하지만 각 줄에 13개의 이미지가 있으므로 imagePerLine에 그대로 두어 다음 이미지 줄로 건너뛰는 데 도움이 되도록 합시다.

const imageCount = 61;
const imageWidth = 600;
const imageHeight = 350;
const imagePerLine = 13;

모든 초기화가 완료되었습니다. 스크롤 이벤트 리스너를 만들어 보겠습니다.
window.addEventListener("scroll", function (e) {})
이제 스크롤 이벤트 리스너가 있으므로 모든 스크롤 관련 속성을 가져올 수 있습니다. 우리가 원하는 것은 scrollTop 속성입니다.
const { scrollTop } = e.target.scrollingElement;
다음 작업: 0-61까지 세고 다시 0으로 돌아갑니다.
scrollTop 값에 대해 mod% 작업을 수행하면 값이 이미지 수 내에 유지되도록 할 수 있습니다.
즉

let stepCount = scrollTop % imageCount

스크롤 시 stepCount에 할당하여 countIndicator의 업데이트를 테스트합니다.



스크롤당 단계가 너무 많이 증가하므로 스크롤당 단계를 줄여야 합니다.
scrollTop를 10과 같은 숫자로 나누면 '부드러운' 전환 값이 제공되며 부동 값을 피하기 위해 Math.Floor도 제공됩니다.
우리는 마침내 stepCount를 다음과 같이 얻었습니다.

let stepCount = Math.floor((scrollTop / 10) % imageCount);

스크롤당 stepCount의 부드러운 전환을 제공합니다.



이제 stepCount가 계산되었으므로 스프라이트 시트에서 이미지를 선택하기 위해 행 및 열 인덱스가 필요합니다. 여기서 라인당 이미지imagePerLine가 작동합니다.

 let columnIndex = stepCount % imagePerLine;
 let rowIndex = Math.floor(stepCount / imagePerLine);

이제 행 및 열 인덱스가 있으므로 각각 imageWidth 및 imageHeight를 곱하여 x 및 y 위치를 픽셀 단위로 계산할 수 있습니다. 이 값은 div css backgroundPosition를 설정하는 데 사용할 수 있습니다.

backgroundPosition에 대해 자세히 알아보기

x = columnIndex * imageWidth * -1;
y = rowIndex * imageHeight * -1;
car.style.backgroundPosition = x + "px " + y + "px";

그리고 짜잔!! 이제 스크롤에 자동차의 360도 뷰가 있습니다.



데모 및 전체 코드here를 찾을 수 있습니다.

질문이 있으시면 저에게 연락하거나 제 Github를 확인하십시오.