Повторяющийся бесконечный текст Marquee - PullRequest
Новая
       28

Повторяющийся бесконечный текст Marquee

0 голосов
/ 02 марта 2020

Я ищу умное и эффективное решение для эффекта выделения (возможно, с использованием тега выделения), чтобы некоторый текст внутри контейнера просто бесконечно повторялся.

То, что я пытаюсь сослаться Например, это.

HTML

<div class="m-el">
    <marquee width="100%" direction="right">
    This text should endlessly be concatenated onto each other.
    </marquee>
</div>

CSS

.m-el { width: 1400px; }

Я знаю Существует множество библиотек для jquery, которые в основном также эмулируют эффект выделения, но мне интересно, как это можно сделать с помощью реального тега выделения или, возможно, с помощью метода перехода css.

Right теперь эффект создает следующую строку текста, которая катится через родительский контейнер div: https://jsfiddle.net/8shjzdut/

Я действительно хочу добиться того, чтобы текст в основном «повторялся» как бесконечный l oop вот так, но с определением предложения только один раз (без излишнего вставления одного и того же текста 100 раз)… https://jsfiddle.net/8shjzdut/1/

Любая умная идея о том, как это сделать ? (если требуется js, это тоже нормально, я просто хочу, чтобы он был максимально быстрым и низким)

1 Ответ

0 голосов
/ 02 марта 2020

Слушай, я нашел способ сделать это, но он повторяет текст дважды 

    $('#maindiv').width($('#div1').width());
 #maindiv{
      border: 2px solid black;
      overflow: hidden;
      white-space: nowrap;
    }
    
    #div1 {
      display: inline-block;
      animation: marquee 10s linear infinite;
    }
    
    #div2 {
      display: inline-block;
      animation: marquee2 10s linear infinite;
      animation-delay: 5s;
    }
    
    @keyframes marquee {
      from {
        transform: translateX(100%);
      }
      to {
        transform: translateX(-100%);
      }
    }
    
    @keyframes marquee2 {
      from {
        transform: translateX(0%);
      }
      to {
        transform: translateX(-200%);
      }
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="maindiv">
      <div id="div1">
        &nbsp;Test-1 Test-2 Test-3 Test-4 Test-5 Test-6 Test-7 Test-8 Test-9 Test-10 Test-11
      </div>
      <div id="div2">
        &nbsp;Test-1 Test-2 Test-3 Test-4 Test-5 Test-6 Test-7 Test-8 Test-9 Test-10 Test-11
      </div>
    </div>
...