Бегущая строка. Чем заменить HTML-тег marquee

5 (100%) 5 vote[s]

Донедавна бегущая строка реализовывалась в HTML просто, при помощи тега <marquee>. Но он уже считается устаревшим, и в любое время может перестать работать. Таким способом реализована бегущая строка в примере плеера на JS. На в последней версии Mozilla эта функция работает с «прихрамыванием». Вот информация по поводу использования тега с developer.mozilla.org: » Вышел из употребления.
Эта возможность вышла из употребления. Хотя она может продолжать работать в некоторых браузерах, её использование не рекомендуется, поскольку она может быть удалена в любое время. Старайтесь избегать её использования. «

Взамен предлагается реализовывать бегущую строку при помощи CSS анимации. На страничке www.w3schools.com находим пример кода анимации и изучаем его:

Сначала воспроизведите анимацию назад, затем вперед

Свойство animation-direction не поддерживается в Internet Explorer 9 и более ранних версиях.

animation-direction: alternate-reverse;

<!DOCTYPE html>
<html>
<head>
<style> 
#anim {
  margin-bottom:200px;
  position:relative;
  width: 30%;
  font-size:26px;
  color:white;
  border-radius:4px;
  padding:20px;
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
  height: 100px;
  background: red;
  position: relative;
  -webkit-animation: myfirst 5s 2; /* Safari 4.0 - 8.0 */
  -webkit-animation-direction: alternate-reverse; /* Safari 4.0 - 8.0 */
  animation: myfirst 5s 200;
  animation-direction: alternate-reverse;
}
#fram {
border:2px solid brown;
border-radius:4px;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
#tks {
font-size: 22px;
text-align:center;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes myfirst {
  0%   {background: red; left: 0px; top: 0px;}
  25%  {background: yellow; left: 200px; top: 0px;}
  50%  {background: blue; left: 200px; top: 200px;}
  75%  {background: green; left: 0px; top: 200px;}
  100% {background: red; left: 0px; top: 0px;}
}

@keyframes myfirst {
  0%   {background: red; left: 0px; top: 0px;}
  25%  {background: yellow; left: 200px; top: 0px;}
  50%  {background: blue; left: 200px; top: 200px;}
  75%  {background: green; left: 0px; top: 200px;}
  100% {background: red; left: 0px; top: 0px;}
}
</style>
</head>
<body>
<div id="fram">
<p id="tks" >Сначала воспроизведите анимацию назад, затем вперед</p>
<p id="tks"><strong> Свойство animation-direction не поддерживается в Internet Explorer 9 и более ранних версиях.</strong></p>
<div id="anim">animation-direction: alternate-reverse;</div>
</div>

</body>
</html>

Принцип создания анимации: использование свойства animation вместе с @keyframes правилом для создания анимации.

Немного переделаем исходный код (упростим, так как для бегущей строки у нас останется только половина), и получим бегущую строку:

Какой-то текст

Для определения расположения текста в начале и в конце анимации используем translate(). Текст перемещается между этими двумя точками в процессе анимации. Для бесконечной прокрутки используем infinite. Значение translate(0, 0) устанавливает координаты x=0, y=0. Начальная позиция текста — за пределами блока справа (padding-left: 100%). Соответственно, transform: translate(-100%, 0) перемещает текст через весь блок влево.

Запись transform: translate(-100%, 0) можно заменить на transform: translateX(-100%), т.е. просто указав, что перемещение будет происходить по оси x. Чтобы сделать анимацию по вертикали, используем transform: translateY(-100%).

Чтобы задать конечное значение прокрутки, заменяем его на число. Чтобы бегущая строка отображалась только в заданной области, устанавливаем overflow: hidden. Скорость анимации — значение 10s. Уменьшаем — скорость увеличивается.

HTML:

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
.marquee {
   width: 50%;
   margin: 0 auto;
   font-size:26px;
   color:#14f77e;
   white-space: nowrap;
   overflow: hidden;
   border-radius:4px;
   box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

.marquee p {
   display: inline-block;
   padding-left: 100%;
   animation: marquee 10s linear infinite;
}

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

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

  </head>
  <body>
    <div class="marquee"><p>Какой-то текст</p></div>
  </body>
</html>

Больше примеров использования анимации для создания бегущей строки смотрите здесь.

Пример на JS

Бегущая строка на JavaScript

<!DOCTYPE html>
<html>
  <head>
    
	<style>
.marquee-wrapper {
  margin:0 auto;
  width: 90%;
  font-size:26px;
  overflow: hidden;
  position: relative;
  border-radius:4px;
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

.marquee-wrapper:after {
  position: absolute;
  content: ' ';
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to right, #fff, transparent, #fff);
}

.marquee {
  white-space: nowrap;
}
	</style>
  </head>
<body>
<div class=marquee-wrapper>
  <p class=marquee>Бегущая строка на JavaScript</p>
</div>

<script>
var wrapper = document.querySelector('.marquee-wrapper'),
    marquee = document.querySelector('.marquee'),   
    wrapperWidth = wrapper.offsetWidth,
    marqueeWidth = marquee.scrollWidth;
    
function move() {
  var currentTX = getComputedStyle(marquee).transform.split(',');
  if( currentTX[4] === undefined ) {
    currentTX = -1;
  } else {
    currentTX = parseFloat(currentTX[4]) - 1;
  }
  
  if(-currentTX >= marqueeWidth) {
    marquee.style.transform = 'translateX(' + wrapperWidth + 'px)';
  
  } else {
    marquee.style.transform = 'translateX(' + currentTX + 'px)';
  }
}

var interval = setInterval(move, 10);
    </script>
  </body>
</html>

Бегущая строка с использованием плагина jquery.marquee.min.js

Не все браузеры поддерживают CSS3. Безотказный и универсальный способ — использовать плагин jQuery. Репозиторий плагина находится на GitHub. Вот пример реализации:

Какая-то бегущая строка

HTML:

<!DOCTYPE html>
<html>
  <head>
    
	<style>
	
.marquee4 {
 text-align:center;
 font-size:26px;
 color:#14f77e;
 margin-left:10%;
 margin-right:10%;
 border-radius:4px;
 padding:10px;
 box-shadow: 0 0 10px rgba(0,0,0,0.5);
  height: 50px;
  overflow:hidden;
}
	</style>
  </head>
  <body>
    <div class="marquee4">Какая-то бегущая строка</div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.Marquee/1.5.0/jquery.marquee.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
    <script>
      $(function(){
        $('.marquee4').marquee({
      
        //Если вы хотите всегда анимировать с помощью jQuery
        allowCss3Support: true,
      
        //работает, когда allowCss3Support имеет значение true - полный список см.http://www.w3.org/TR/2013/WD-css3-transitions-20131119/#transition-timing-function
        css3easing: 'linear',
      
        //Требуется плагин JQuery. По умолчанию это «линейный»
        easing: 'linear',
      
        //время паузы до следующего поворота анимации в миллисекундах
        delayBeforeStart: 1000,
        //'left', 'right', 'up' or 'down'
        direction: 'left',
      
        //true или false - следует ли дублировать выделение, чтобы показать эффект продолжения потока
        duplicated: false,
      
        //скорость в миллисекундах
        duration: 5000,
      
        //разрыв в пикселях между тикерами
        gap: 20,
      
        //пауза
        pauseOnCycle: false,
      
        //при наведении курсора на паузу - с помощью плагина jQuery https://github.com/tobia/Pause
        pauseOnHover: false,
      
        startVisible: false
        
        });
      });
    </script>
  </body>
</html>

Читайте больше по теме: