Повторяющаяся бесконечная текстовая область

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

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

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, которые в основном также имитируют эффект выделения, но мне интересно, как это потенциально можно сделать с помощью реального тега marquee или, возможно, метода перехода css.

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

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

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


animation html jquery css marquee
person matt    schedule 02.03.2020    source источник
comment
Обратите внимание, что тег <marquee> нестандартен и никогда не был частью какой-либо спецификации HTML. Он указан в текущей спецификации HTML5 с единственной целью пометить его как устаревший в качестве уведомления о том, что поставщики браузеров намереваются прекратить поддержку в какой-то момент в будущем. html.spec.whatwg.org/dev/obsolete.html#obsolete   -  person Rob    schedule 02.03.2020
comment
@Alohci sigh В спецификации говорится, что это, помимо прочего, не должно использоваться. Где-то в другом месте, iirc, я полагаю, говорится, что браузеры не обязаны поддерживать устаревшие функции. Хотя я не должен был говорить, что они собираются удалить его, намерение пометить его как устаревшее довольно ясно - особенно для <marquee>, который никогда не был частью какой-либо спецификации HTML.   -  person Rob    schedule 02.03.2020

Ответы (1)


arrow_upward
-1
arrow_downward

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

    $('#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>

person Castle    schedule 02.03.2020