Ticker UI 구현해보기

기획서를 검토하는 중, 처음보는 UI 를 발견하였다.
컨텐츠가 왼쪽으로 흐르는 UI 였는데, 얼핏보면 쉬워보이지만 여러가지 변수가 많았다.

1. 해당 컨텐츠수는 고정인건가?
2. 반응형인 경우 width 값을 계산을 하여야 하는데 어떤식으로 해야하는가?
3. 무한하게 반복을 하는데, 끝나는 지점에 또 시작지점이 오는가?(loop infinity)

결론적으로는 해당 컨텐츠는 관리자에서 노출되는 수로 관리가 되며, 다행스럽게 웹은 반응형이 아니기에 width 값이 고정이 되어서 계산이 가능하였다.

UI 예제 참고 : https://codepen.io/lewismcarey/pen/GJZVoG
위 사이트를 살펴보면 하단에 계속 텍스트가 반복해서 돌아가는게 보이는데, 이게 ticker UI 다.

예제코드

<div class="main-ticker-wrap">
  <div class="main-ticker-body row align-items-center">
    <div class="col-3 ticker-item">
      나는 제로86
    </div>
    <div class="col-3 ticker-item">
      너는 누굴까?
    </div>
    <div class="col-3 ticker-item">
      메롱메롱
    </div>
    <div class="col-3 ticker-item">
       날씨는 맑음
    </div>

    <!-- copy -->
    <div class="col-3 ticker-item">
      나는 제로86
    </div>
    <div class="col-3 ticker-item">
      너는 누굴까?
    </div>
    <div class="col-3 ticker-item">
      메롱메롱
    </div>
    <div class="col-3 ticker-item">
       날씨는 맑음
    </div>
  </div>
</div>

* {
  box-sizing: border-box;
}

.main-ticker-wrap {
  overflow: hidden;
}

.main-ticker-body {
  /* border: 1px dotted black;
  width: 100%; */
}

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

.align-items-center {
  align-items: center;
}

.col-3 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: 25%;
}

.ticker-item {
  flex-shrink: 0;
  white-space: nowrap;
  padding: 10px;
  border: 1px dotted red;
  max-width: 220px;
  min-width: 220px;
}

const mainTickerBodyEl = document.querySelector('.main-ticker-body')
if (mainTickerBodyEl) {
  // 220px + maring px + margin px * item 개수
  const xWidth = -1 * (220 * 4)
  // 총 10개의 아이템을 각 3초씩 보여준다면 총 30초가 필요 + 거기에 다음 첫번째 요소가 오는 3초를 더해준다
  // 4 * 3 = 12초 + 3초 : 15초
  const durationSec = (3 * 4) + 3
  this.mainTickerBodyElAnimate = mainTickerBodyEl.animate(
    [{
        transform: `translate3d(0, 0, 0)`
      },
      {
        transform: `translate3d(${xWidth}px, 0, 0)`
      }
    ], {
      duration: 1000 * durationSec,
      easing: 'linear',
      iterations: Infinity
    }
  )
}

• ticker UI 에서 애니메이션 효과를 줄때 item 에 width 와 개수가 중요하다.
• -1 220 4 값이 요소를 이동시킬 x값이다.
• 애니메이션 초를 구해야하는데, 10개를 3초동안 보여준다면 30초가 필요하다. 다음 시작요소가 올때까지를 고려하여 10 * 3 + 3 해주면 된다.
• animate() 함수를 호출하여 효과를 준다. (animate 함수는 IE에서 전혀 지원이 안된다.)
• animate() 함수에서 duration 은 ms 이기 때문에, 구한초값에 1000을 곱해준다.

참고 : https://codesandbox.io/s/ticker-ui-sample-tb8z4