Приготовим зацикленную бегущую строку на чистом ХТМЛ и ЦСС, без программирования.

Внутрь двух обёрток положите содержимое строки. Ширина содержимого должна быть больше ширины обёртки, чтобы анимация работала бесшовно. Само содержимое для бесшовности нужно продублировать.

Ограничьте первую обёртку по ширине и обрежьте вылезающее. Второй обёртке дайте ширину по содержимому и примените анимацию сдвига от 0 до −50% ширины. Чтобы изменить направление, допишите к анимации reverse или поменяйте местами значения в самой анимации.

@keyframes ticker {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
      
.ticker {
  background: #ffe43b;
  color: #000;
  font-family: system-ui;
  font-size: 24px;
  max-width: 40em;
  overflow: hidden;
}
      
.ticker__in {
  display: flex;
  width: fit-content;
  animation: ticker 10s linear infinite;
  -webkit-transform-style: preserve-3d; /* Фикс возможного глюка с морганием в Сафари */
}
      
.ticker__item {
  padding: .5em .75em;
  white-space: nowrap;
  -webkit-backface-visibility: hidden; /* Фикс возможного глюка с морганием в Сафари */
}
<div class="ticker">
  <div class="ticker__in">
    <span class="ticker__item">Мультидисциплинарные советы</span>
    <span class="ticker__item">Полезные лекции</span>
    <span class="ticker__item">Бомбические курсы</span>
    <span class="ticker__item">Лучшие в мире книги</span>
    <span class="ticker__item">Суровая школа</span>
    <span class="ticker__item">Инновационные дома</span>
      
    <span class="ticker__item">Мультидисциплинарные советы</span>
    <span class="ticker__item">Полезные лекции</span>
    <span class="ticker__item">Бомбические курсы</span>
    <span class="ticker__item">Лучшие в мире книги</span>
    <span class="ticker__item">Суровая школа</span>
    <span class="ticker__item">Инновационные дома</span>
  </div>
</div>

Вуаля:

Мультидисциплинарные советыПолезные лекцииБомбические курсыЛучшие в мире книгиСуровая школаИнновационные домаУютное КоворкафеМультидисциплинарные советыПолезные лекцииБомбические курсыЛучшие в мире книгиСуровая школаИнновационные домаУютное Коворкафе

Добавьте стилей по вкусу, подгоните размеры. Подавайте после проверки в разных браузерах.

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Веб‑разработка
Отправить
Поделиться
Запинить

Рекомендуем другие советы