CSS만으로 무한 스크롤 캐러셀 애니메이션

소개#

우리는 JavaScript 를 사랑합니다, 물론이죠. 그러나 CSS만으로 무엇을 이룰 수 있는지 보는 것은 항상 재미있습니다 - 특히 애니메이션과 관련해서는 CSS 애니메이션이 종종 JavaScript 애니메이션보다 "덜 무겁기" 때문입니다.

이 포스트에서는 CSS만을 사용하여 호버 시 일시 정지되는 무한 스크롤 캐러셀 애니메이션을 만드는 방법을 보여드리겠습니다. 우리가 만들것에 대한 미리보기는 다음과 같습니다:

카드 행 만들기#

먼저 캐러셀의 기본 구조를 만들어봅시다. 카드의 행을 고려하세요:

좋은데요, 그렇죠? 이 카드들은 여러분의 화려한 배너, 제품 이미지 또는 캐러셀에 표시하려는 모든 것이 될 수 있습니다.

카드 복제#

우리가 캐러셀을 무한하게 만들고 싶기 때문에, 끝과 끝이 서로 연결되어야 합니다. 본능적으로, 우리는 카드를 반복하려 할 수 있습니다:

결과를 확인해보세요:

첫 번째 카드 세트만 보입니다. HTML을 확인해보면, 두 번째 카드 세트가 첫 번째 세트를 따라오며 숨겨져 있는 것을 볼 수 있습니다.

캐러셀 애니메이션하기#

이제 캐러셀을 애니메이션할 시간입니다! 카드 세트가 두 그룹으로 연결되어 있으므로, 카드 그룹을 변환하여 캐러셀을 애니메이션할 수 있습니다. 방법은 다음과 같습니다:

우리가 추가해야 할 마지막 터치가 있습니다: 캐러셀에 커서를 올렸을 때 애니메이션을 일시 정지시키는 것입니다. 이렇게 하면 사용자가 내용을 더 명확하게 볼 수 있습니다. 카드 세트가 두 그룹이므로, 캐러셀에 커서를 올렸을 때 두 그룹 모두를 일시 정지시켜야 합니다:

이게 전부입니다! 🎊 이제 캐러셀에 커서를 올리면 애니메이션이 일시 정지됩니다.

마무리 생각#

CSS 는 강력하며, 우리가 그것으로 무엇을 이룰 수 있는지 탐구하는 것은 항상 재미있습니다. scroll-snap-type 및 scroll-snap-align과 같은 다른 CSS 속성들도 캐러셀을 상호 작용적으로 만드는 데 도움을 줄 수 있습니다. 행복한 코딩 되세요! 🚀