배너는 어떻게 개발하나요? 에서 배너 개발에 대해 얘기했었는데요. 최근에 웹 서비스를 이용하다가 해당 글에서 얘기한 배너와는 다른 방식으로 동작하는 배너를 봤었습니다.
좌측에서 우측으로 이동하는 방식의 배너인데요. 특이한 점은 현재 배너 이미지 좌우로 이전 배너 이미지의 일부와 다음 배너 이미지의 일부가 노출되고 있었습니다.
이번 글에서는 위와 같은 배너를 제가 어떻게 개발했는지 얘기해볼게요.
먼저 다음의 다섯가지에 대해 생각해 볼 필요가 있었습니다.
- 여러개의 배너 이미지를 어떻게 일렬로 위치시킬 것인가?
- 일렬로 위치시킨 배너를 어떻게 일부만 노출시킬 것인가?
- 배너 이미지를 어떻게 이동시킬 것인가?
- 마지막 배너 이미지와 첫번째 배너 이미지를 어떻게 연결할 것인가?
- 이전 배너 이미지 일부와 다음 배너 이미지 일부를 어떻게 노출시킬 것인가?
1. 여러개의 배너 이미지를 어떻게 일렬로 위치시킬 것인가?
배너 이미지를 감싸는 부모 엘리먼트에 'display: flex'와 'width: fit-content'를 사용했습니다. 그리고 배너 이미지에 해당하는 엘리먼트에 동일한 width 값을 주었습니다.
2. 일렬로 위치시킨 배너를 어떻게 일부만 노출시킬 것인가?
1번에서 'display: flex'를 적용한 엘리먼트(배너 이미지를 감싸는 부모 엘리먼트)의 부모 엘리먼트에 'overflow-x: hidden'을 사용했습니다.
3. 배너 이미지를 어떻게 이동시킬 것인가?
배너 이미지를 감싸고 있는 부모 엘리먼트에 'transform: translateX(-1 * (100 / 배너 이미지 개수 * 현재 노출시킬 배너 이미지 인덱스) %)' 와 'transition: 0.5s'를 사용해서 배너가 좌측에서 우측으로 이동하는 것처럼 보이게 했습니다.
4. 마지막 배너 이미지와 첫번째 배너 이미지를 어떻게 연결할 것인가?
위의 화면 처럼 1번 이미지 -> 2번 이미지 -> 3번 이미지 -> 2번이 노출되고 1번 이미지와 같은 상황이 발생하지 않기 위해서 첫번째 배너 이미지와 마지막 배너 이미지가 연결된 것처럼 만들어야 합니다. 이를 위해서 마지막 배너 이미지 다음에 첫번째 배너 이미지를 추가해주고 첫번째 배너 이미지 이전에 마지막 배너 이미지를 추가했습니다.
배너가 우측으로 이동할 때 인덱스 번호가 4인 이미지의 노출시간이 지나면 인덱스 번호 1번인 이미지를 노출시킵니다. 이 때 transition을 0s로 변경해서 사용자에게 3번 이미지와 2번 이미지가 노출되지 않도록 했습니다. 그 다음 transition을 다시 0.5s로 변경하고 배너 이미지 노출시간을 0으로 변경해서 인덱스 번호가 2번인 이미지로 곧 바로 이동하게 했습니다.
사용자가 버튼을 눌러서 배너가 좌측으로 이동할 때는 인덱스 번호가 0인 이미지의 노출시간이 지나면 인덱스 번호 3번 이미지를 노출시킵니다. 이 때도 transition을 0s로 변경해서 사용자에게 1번 이미지와 2번 이미지가 노출되지 않도록 했습니다. 그 다음 transition을 다시 0.5s로 변경하고 배너 이미지 노출시간을 0으로 변경해서 인덱스 번호가 2번인 이미지로 곧 바로 이동하게 했습니다.
이 때 주의할 점은 인덱스 번호 1번인 이미지와 인덱스 번호 3번인 이미지를 노출시킬 때 이미지의 이동 방향을 구분하고 있어야 배너가 좌측으로 이동할 때와 우측으로 이동할 때의 이미지 노출 시간과 transition 값을 변경해서 배너가 정상적으로 작동할 수 있습니다.
5.이전 배너 이미지 일부와 다음 배너 이미지 일부를 어떻게 노출시킬 것인가?
배너 이미지를 감싸고 있는 부모 엘리먼트의 'transform'을 ' translateX(-1 * ((100 / 배너 이미지 개수) * 0.9 + (100 / 배너 이미지 개수) * 현재 노출시킬 배너 이미지 인덱스) %)' 로 변경해서 이전 배너 이미지 일부와 다음 배너 이미지 일부가 노출되도록 했습니다.
그리고 인덱스 번호 0번인 이미지가 노출될 때와 인덱스 번호 4번인 이미지가 노출될 때 이전 배너 이미지 일부와 다음 배너 이미지 일부가 노출될 수 있도록 맨 앞과 맨 뒤에 배너 이미지를 추가했습니다.
브라우저에서는 다음과 같이 보여집니다.
