JSFiddle - React, Tailwind, and code Playground

by artgas_pro

HTML

<section class="baner" >
      <span class="baner__start">Рухомий рядок</span>
</section>

SCSS

.baner {
   display: inline-block;
   position: relative;
   margin: 0 0 100px 0;
   min-width: 987px;
   @media (max-width: 767.98px) {
      margin: 0 0 60px 0;
   }
   .baner::before {
      content: "";
      width: 50vw;
      height: 120px;
      background-color: #fafafaed;
      position: absolute;
      @media (max-width: 767.98px) {
         height: 80px;
      }
   }
   .baner__start {
      position: relative;
      display: inline-block;
      font-family: Russo One;
      font-size: 35px;
      line-height: 1.2;
      margin: 0 100px 0 0;
      text-transform: uppercase;
      color: #232322;
      padding: 39px 0;
      //  min-width: 987px;
      letter-spacing: 10px;
      @media (max-width: 767.98px) {
         font-size: 25px;
         //   min-width: 787.4px;
         padding: 25px 0;
         margin: 0 60px 0 0;
      }
   }
}

JavaScript

const baner = document.querySelector('.baner');
   if (baner) {
      const banerStart = document.querySelector('.baner__start');
      let banerText = banerStart.innerHTML;
      const banerSpanStart = `<span class="baner__start">${banerText}</span>`;
      function animationBanerText() {
         let screenWidth = 0;
         let textWidth = 0;
         let spanQuantity = 0;
         let banerWidth = 0;
         let textMarginRight = +getComputedStyle(banerStart).marginRight.replace("px", "");
         screenWidth = document.documentElement.clientWidth
         textWidth = banerStart.clientWidth + textMarginRight;
         spanQuantity = Math.ceil(screenWidth / textWidth);
         if (spanQuantity > 1) {
            banerWidth = spanQuantity * textWidth + textWidth + 10;
         } else {
            banerWidth = (spanQuantity + 1) * textWidth + textWidth;
         }
         baner.style.width = banerWidth + "px";
         for (let i = 0; i < spanQuantity; i++) {
            banerStart.insertAdjacentHTML('afterEnd', banerSpanStart);
         }

         document.querySelectorAll('.baner__start').forEach((item) => {
            item.animate([
               { transform: 'translate(0, 0)' },
               { transform: 'translate(-' + `${(textWidth)}` + 'px, 0)' }
            ], {
               duration: 10000,
               iterations: Infinity
            })
         });
      }
      animationBanerText();
   }