Как сделать не заканчивающийся текст в marquee? (html,css)

Question

Как сделать бесконечный текст в marquee? Я пытался использовать тег marquee в HTML, но он не позволяет сделать текст зацикленным.

<marquee>muzcheez</marquee>

Я также пробовал через CSS, но столкнулся с проблемой: чтобы текст зацикливался, нужно было подождать, пока пройдет первая строка.

Кто знает, пожалуйста подскажите код

Answer 1

Можно вот таким образом зациклить. Правда надо проверять совместимость с браузерами. Мой ответ не идеален, но тем не менее работает. Может, кто-то представит решение получше.

Обратите особое внимание, что span использован несколько раз и слово там использовано несколько раз. Это, к сожалению, необходимо, так как браузеры рассчитывают ширину показываемого блока, в том числе по-разному учитываются пробелы, расстояния между букв, отступы и пр. Из-за чего механизм отрисовки иногда срабатывает не совсем корректно, не отображая элементы, которые не поместились. Поэтому необходимо добавить избыточные блоки, чтобы отрисовка была корректной.

.ticker {
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
}

.ticker__track {
  display: inline-block;
  will-change: transform;
  animation: scroll 12s linear infinite;
}

@keyframes scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

<div class="ticker">
  <div class="ticker__track">
    <span>muzcheez - muzcheez - muzcheez - muzcheez - muzcheez - </span>
    <span>muzcheez - muzcheez - muzcheez - muzcheez - muzcheez - </span>
    <span>muzcheez - muzcheez - muzcheez - muzcheez - muzcheez - </span>
    <span>muzcheez - muzcheez - muzcheez - muzcheez - muzcheez - </span>
  </div>
</div>

БЛОГ НА HUSL

Как сделать не заканчивающийся текст в marquee? (html,css)

Ответы (1 шт):