시작

카셀의 창고라고 하면 슬릭이야.나는 js와 Swiper 등이 있다고 생각하지만, 둘 다 옵션이 많고, 빈대에 빠지기도 한다.그리고 파일 크기도 커서 간단한 일만 할 필요가 있다고 생각해요.
그래서 나는 카셀을 자제하고 어떤 느낌으로 설치했는지 기사를 정리해 보았다.

구현 방법

각 항목의 표시 및 위치 정보

원소의 이동은transform에서 집중적으로 이동하는 방법을 사용하지만 이동량은 가능한 한 간단하다.
부모 원소는 white-space: nowrap 에서 줄을 바꾸지 않고 하위 원소 display: inline-block 에서 가로로 배열한다.이럴 때 마크를 켜지 마세요.margin을 넣지 않고 꽉 붙어 매번 하나translate3d(-100%, 0, 0)를 이동하면 넘어갈 수 있다.
공간에 넣고 싶은 경우padding을 넣고 그 안에 새로운 요소를 넣어 실현한다.
※ 최상위 부모 요소는 블럭을 억지로 유지하면 한 항목의 사이즈로 만들 수 있기 때문에 중앙의 색깔이 쉽게 만들어집니다.
※ translateX가 아니라 translate3d인 이유는 GPU를 렌더링하기 위해서입니다

스캔 프로세스

이제 위의 방법으로 각 항목의 위치로 이동할 수 있습니다.
다음은 미끄럼 처리입니다. 이것은 단순히 시작 위치와 이동 중의 위치를 얻고 그 차이점만 틀리면 됩니다.
위의 설명과 결합하면%와 px를 지정하지만transform: translate3d(-100%, 0, 0) translate3d(-30px, 0, 0)처럼 중첩되어translate를 진행할 수 있습니다.
이후 이 차이에 따라 앞으로 또는 뒤로 이동하면 된다.
말이 끝난 후의 이동은 CSS 애니메이션일 수 있지만, 미끄럼에서의 이동은 매우 느려 보이기 때문에 미끄럼에서 CSS 애니메이션은 닫아야 합니다.
그림에서 마우스를 예로 들면 터치할 때도 같은 일을 할 수 있다.

무한 카세르를 실현하다

이상은 일반적인 카셀의 설치이지만, 무한 카셀을 만드는 상황에 대해 어떻게 하는지 소개하고 싶습니다.
먼저 앞뒤로 복사된 요소를 표시합니다.이렇게 하면 초기 위치에서도 앞의 마지막 원소를 볼 수 있다.
다음은 위치를 바꾸는 조정이다. 일반적인 카셀은 뒤집기를 마친 후 0에서 요소수로 조정하지만 무한 스크롤은 애니메이션에서 조정하지 않는다.그래서 애니메이션에서도 복제 요소를 중심으로 할 때가 있다.
이렇게 전진하면 언젠가는 복사 요소가 없는 곳으로 이동하기 때문에 애니메이션이 끝날 때 단숨에 반대편의 주체 요소가 있는 곳으로 이동한다.이 이동은 애니메이션을 닫을 때 눈치채지 못하기 때문에 문제가 없습니다.

끝날 때

이상은 카셀을 설치하는 방법입니다.코드를 쓰려면 복잡하고 이해하기 어려워서 일부러 그림으로 설명했어요.
자세한 설치는 CodePen에 적혀 있습니다. 한번 보시면 좋을 것 같습니다.
See the Pen 카셀 by wintyo ( @wintyo )
on CodePen .