[CSS] Carousel 정리하기 (2) - Overlap

안녕하세요. J4J입니다.

 

이번 포스팅은 Carousel 정리하기 마지막인 Overlap에 대해 적어보는 시간을 가져보려고 합니다.

 

 

 

Overlap Carousel 원리

 

overlap carousel의 원리는 일반적인 carousel의 원리에서 조금 더 생각해봐야 할 부분이 있습니다.

 

기본적인 부분은 일반 carousel과 동일하지만 주목해야 할 차이점은 carousel에 보일 아이템들의 위치가 항상 사용자에게 보이는 화면에 위치한다는 것입니다.

 

그림으로 예를들면 다음과 같습니다.

 

Overlap Carousel 원리

 

 

 

위의 그림을 보면 사용자가 처음 화면에 접속했을 때나 오른쪽으로 리스트를 넘겼을 때나 동일하게 아이템들의 위치는 항상 사용자에게 보이는 화면에 위치하고 있습니다.

 

하지만 그와 달리 아이템을 덮고 있는 컨테이너들은 좌우 이동되는 위치를 유지하고 있어야 합니다.

 

즉, carousel을 좌우로 넘기면서 사용자에게 보여지는 컨테이너가 있을 거고 해당 컨테이너에 포함되지 않는 아이템들은 화면에서 점점 사라지며 반대로 컨테이너에 포함되는 아이템들은 화면에 점점 나타나는 애니메이션을 줍니다.

 

구현 방법을 단계별로 살펴보도록 하겠습니다.

 

 

반응형

 

 

Overlap - 기본

 

See the Pen overlapCarousel-base by 김 성찬 (@ksccmp) on CodePen.

 

 

 

위의 방법은 가장 기본적인 방법입니다.

 

특징은 다음과 같이 있습니다.

 

• 마우스 클릭 or 터치를 통해 좌우로 움직이기
• 움직임을 종료할 경우 자동으로 근처 아이템에 이동
• 아이템이 이동될 때 transition을 사용하여 자연스러운 애니메이션 제공
• 최소 or 최대 아이템 개수에 도달할 때까지 좌우로 움직이기

 

 

 

 

Overlap - Infinite

 

See the Pen overlapCarousel-infinite by 김 성찬 (@ksccmp) on CodePen.

 

 

 

위의 방법은 기본 carousel에서 좌우의 제한 없이 무한으로 움직일 수 있도록 구현되어 있습니다.

 

특징은 다음과 같이 있습니다.

 

• 마우스 클릭 or 터치를 통해 좌우로 움직이기
• 움직임을 종료할 경우 자동으로 근처 아이템에 이동
• 아이템이 이동될 때 transition을 사용하여 자연스러운 애니메이션 제공
• 무한하게 좌우로 움직이기

 

 

 

그리고 좌우로 무한하게 움직이는 carousel을 구현하기 위해서는 다음의 내용들에 대해 알고 계셔야 합니다.

 

• carousel 아이템을 목록에 배치할 때 동일한 아이템들을 복제하여 좌우에 더 배치하기
• 예를 들면 carousel에 5개가 보여야 한다면 목록에는 총 15개가 배치되어야 함
• 사용자에게 보이는 carousel 아이템들은 항상 가운데에 존재하는 아이템들만 보이도록 하기
• 예를 들면 5개를 보여줄 때 (1~5) | (`1~`5) | (``1 ~ ``5) 의 형태로 목록에 배치가 될 텐데 (`1~`5)에 해당되는 아이템들을 보이도록 함
• 항상 가운데에 있는 아이템들을 보여주기 위한 방법으로 아이템을 움직이기 위해 마우스로 클릭하거나 터치를 시작할 때 아이템의 배치를 가운데로 옮기기
• 예를 들면 4와 ``4를 클릭하거나 터치하면 순간적으로 사용자에게 `4가 보이도록 하고, 2와 ``2를 클릭하거나 터치하면 순간적으로 사용자에게 `2가 보이도록 함

 

 

 

 

Overlap - Infinite Move Control

 

See the Pen overlapCarousel-infiniteMoveControl by 김 성찬 (@ksccmp) on CodePen.

 

 

 

위의 방법은 무한 overlap carousel의 단점을 보완한 방법입니다.

 

무한 overlap carousel을 사용하다보면 다음과 같은 문제점을 발견할 수 있습니다.

 

infinite overalp carousel 문제점

 

 

 

만들어진 무한 carousel을 테스트해보면 좌우로 이동되는 도중 다시 마우스를 클릭할 경우 뚝뚝 끊기는 현상을 확인해 볼 수 있습니다.

 

해당 현상은 이동되고 있던 위치를 보장해주지 않았기 때문에 발생되는 문제입니다.

 

위의 코드는 해당 문제를 해결한 코드로 좌우로 움직이는 도중 다시 마우스를 클릭하더라도 사용자에게 자연스러운 UX를 제공해줄 수 있습니다.

 

 

 

특징은 다음과 같이 있습니다.

 

• 마우스 클릭 or 터치를 통해 좌우로 움직이기
• 움직임을 종료할 경우 자동으로 근처 아이템에 이동
• 아이템이 이동될 때 transition을 사용하여 자연스러운 애니메이션 제공
• 무한하게 좌우로 움직이기
• 아이템이 이동되는 도중 다시 마우스 클릭 or 터치를 할 경우 이동되던 위치 보장

 

 

 

 

Overlap - Infinite Move Control Timer

 

See the Pen overlapCarousel-infiniteMoveControlTimer by 김 성찬 (@ksccmp) on CodePen.

 

 

 

위의 방법은 무한 move control carousel에 자동으로 좌우로 움직일 수 있는 타이머를 넣어준 것입니다.

 

특징은 다음과 같이 있습니다.

 

• 마우스 클릭 or 터치를 통해 좌우로 움직이기
• 움직임을 종료할 경우 자동으로 근처 아이템에 이동
• 아이템이 이동될 때 transition을 사용하여 자연스러운 애니메이션 제공
• 무한하게 좌우로 움직이기
• 아이템이 이동되는 도중 다시 마우스 클릭 or 터치를 할 경우 이동되던 위치 보장
• 일정 시간이 지날 때마다 자동으로 좌우로 이동

 

 

 

 

 

 

 

 

이상으로 Carousel 정리하기 마지막인 Overlap에 대해 간단하게 알아보는 시간이었습니다.

 

읽어주셔서 감사합니다.