기획서를 검토하는 중, 처음보는 UI 를 발견하였다.
컨텐츠가 왼쪽으로 흐르는 UI 였는데, 얼핏보면 쉬워보이지만 여러가지 변수가 많았다.
결론적으로는 해당 컨텐츠는 관리자에서 노출되는 수로 관리가 되며, 다행스럽게 웹은 반응형이 아니기에 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
}
)
}