흐르는 무한 롤링 배너

HTML

<div class="flow_banner">
  <ul class="list">
    <li>TEXT1</li>
    <li>TEXT2</li>
    <li>TEXT3</li>
    <li>TEXT4</li>
    <li>TEXT5</li>
  </ul>
</div>

CSS

ul, li {list-style: none;}
.flow_banner {overflow: hidden;display: flex;max-width: 1180px;margin: 30px auto;background: #000;}
.flow_banner .list {display: flex;}
.flow_banner .list > li {font-size: 18px;color: #fff;padding: 20px;}
@keyframes flowRolling {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

/* 반응형 스타일 */
@media (max-width: 1280px) {
    .flow_banner .list > li {font-size: 16px;padding: 10px;}
}

@media (max-width: 767px) {
    .flow_banner .list > li {font-size: 14px;padding: 5px;}
}

JS

$(window).on('load', function () {
  setFlowBanner();  
})

function setFlowBanner(){
  const $wrap = $('.flow_banner');
  const $list = $('.flow_banner .list');
  let wrapWidth = $wrap.width();
  let listWidth = $list.width();
  const speed = 92; //1초에 몇픽셀 이동하는지 설정

  //리스트 복제
  let $clone = $list.clone();
  $wrap.append($clone);
  flowBannerAct()

  //배너 실행 함수
  function flowBannerAct() {
    //무한 반복을 위해 리스트를 복제 후 배너에 추가
    if (listWidth < wrapWidth) {
      const listCount = Math.ceil(wrapWidth * 2 / listWidth);
      for (let i = 2; i < listCount; i++) {
        $clone = $clone.clone();
        $wrap.append($clone);
      }
    }
    $wrap.find('.list').css({ 'animation': `${listWidth / speed}s linear infinite flowRolling` }); 
  } 
}

참고사이트

https://ctrlcccv.github.io/code/2023-07-23-flow-banner/