Как сделать текст бегущей строкой?

от автора

в ,

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

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

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

Реализация на 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%);
  }
Каждая кухарка должна научиться управлять государством.

Буду признателен за Share 🙏


Комментарии

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *