무한롤링 배너 만들기

무한 롤링이 되는 간단한 배너를 만들어보자!

<div class="styling-wrap con">
      <div class="styling-tv">
        <div class="animation_list animation">
          <div class="img-list row">
            <div class="img-box">1</div>
            <div class="img-box">2</div>
            <div class="img-box">3</div>
            <div class="img-box">4</div>
            <div class="img-box">5</div>
            <div class="img-box">6</div>
            <div class="img-box">7</div>
            <div class="img-box">8</div>
            <div class="img-box">9</div>
            <div class="img-box">10</div>
          </div>
          <div class="img-list row">
            <div class="img-box">1</div>
            <div class="img-box">2</div>
            <div class="img-box">3</div>
            <div class="img-box">4</div>
            <div class="img-box">5</div>
            <div class="img-box">6</div>
            <div class="img-box">7</div>
            <div class="img-box">8</div>
            <div class="img-box">9</div>
            <div class="img-box">10</div>
          </div>
        </div>
      </div>
    </div>
  </body>

* {
        margin: 0;
        padding: 0;
      }
      body {
        overflow-x: hidden;
      }
      .styling-wrap {
        padding: 5%;
      }
      .styling-wrap > .styling-tv {
        width: 95%;
        height: auto;
        background-color: #ccc;
        padding: 10px;
        overflow: hidden;
      }

      .styling-wrap > .styling-tv > .animation_list {
        width: 1200px;
        overflow: hidden;
        box-sizing: border-box;
        display: flex;
      }

      .styling-wrap > .styling-tv .img-list {
        width: 600px;
        display: flex;
        gap: 10px;
      }

      .styling-wrap > .styling-tv .img-box {
        width: 50px;
        height: 50px;
        border-radius: 50px;
        background-color: purple;
        text-align: center;
      }

  const DivBox = document.querySelector(".img-list");
    const DivBox2 = document.querySelector(".img-list:first-child");
    const aniBox = document.querySelector(".animation_list");

    count = 0;

    function rolling() {
      let rolingInter = setInterval(function() {
        count--;
        aniBox.style.transform = `translateX(${count}px)`;
        if (count < -600) {
          count = 0;
          count--;
        }
      }, 20);
    }
    rolling();

setInterval 기능을 활용하여 count가 -될수록
anibox style이 왼쪽으로 흘러가도록 설정을 해두고,
count 값이 절반값보다 작아지면 다시 0으로 원래자리로 설정을 해둔뒤
또 - 값으로 설정을 해 두었습니다.