Альтернатива <marquee> средствами CSS

stream

Support
Команда форума
Регистрация
09.09.14
Сообщения
1.014
Реакции
674
Баллы
113
В секции <head><style> вставляем код css:
CSS:
   .marquee {
   padding-right: 5px;
    overflow: hidden; /* скрываем строку за ее пределами */
    white-space: nowrap; /* запрещаем переносы слов */
    -webkit-animation: marquee 30s linear infinite;
    animation: marquee 30s linear infinite;
   }
   .marquee:hover {
    -webkit-animation-play-state: paused;
    animation-play-state: paused; /* пауза при наведении курсора */
   }
   @-webkit-keyframes marquee {
    from { text-indent: 100%; }
    to { text-indent: -100%; }
   }
   @keyframes marquee {
    from { text-indent: 100%; }
    to { text-indent: -100%; }
   }
В секции <body> пишем код html:
HTML:
<div class="marquee">                 
Ваш текст
</div>
...Дескриптор <marquee> признан устаревшим, и не рекомендуется к использованию. Вывод динамичного текста при помощи css более плавный, без рывков.
Тестировалось в Mozilla Firefox, Opera.
 

mychatik

Support
Команда форума
Регистрация
26.05.15
Сообщения
529
Реакции
461
Баллы
63
Тег <marquee> не просто устаревший.
Он не входит в спецификацию HTML и его наличие приводит к невалидному коду.
Первоначально тег был предназначен только для браузера Internet Explorer, но версии других браузеров также понимали и поддерживали его.

Ещё один вариант замены тега <marquee> на CSS.

CSS:
.marquee {
  width: 77%;  /* задаём длину строки */
  margin: 0 auto;
  white-space: nowrap;
  overflow: hidden;
  box-sizing: border-box;
}

.marquee span {
  display: inline-block;
  padding-left: 100%;
  animation: marquee 25s linear infinite;  /* задаём скорость прокрутки */
}

.marquee span:hover {
  animation-play-state: paused;
}

@keyframes marquee {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-100%, 0);
  }
}

Применение. Заменяем открывающий и закрывающий теги <marquee> на:
HTML:
<p class="marquee"><span>
Здесь код, который должен "бежать"
</span></p>
 
Сверху Снизу