Метка: marquee

Пожалуй, самый простой и быстрый способ решить эту задачу является заключение текста в специальный HTML-элемент <marquee>, который используется для создания на странице прокручивающегося текста (бегущей строки).

Текс помещенный в теги этого элемента сразу начинает выполнять прокрутку. Ниже можно увидеть пример:

<marquee>Каждая кухарка должна научиться управлять государством</marquee>

Каждая кухарка должна научиться управлять государством

<marquee
  direction="left"
  bgcolor="yellow"
  width="480"
  behavior="scroll"
  style="display:block">
  <span>Каждая кухарка должна научиться управлять государством</span>
</marquee>

Каждая кухарка должна научиться управлять государством

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

Реализация на CSS

Ранее мы решили эту задачу мгновенно за счёт HTML, а теперь давайте рассмотрим пример на CSS.

Вот такой вид будет иметь наш HTML

<div class="scroll-wrap">
  <div class="scroll-text">Каждая кухарка должна научиться управлять государством.<div>
</div>

А вот такой CSS:

.scroll-wrap {

  overflow: hidden;
}

.scroll-text {
  transform: translateX(100%);
  animation: scroll-animation 15s linear infinite;
}

@keyframes scroll-animation {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }