Как создать эффект marquee без использования тега <marquee> (с помощью CSS, JavaScript и jQuery)

  1. Создайте эффект marquee c помощью CSS анимаций (горизонтально и вертикально)
  2. Создайте эффект marquee с помощью JavaScript
  3. Создайте плагин скроллинга текста с помощью jQuery

Тег marquee больше не используется. Это старый и нестандартный HTML элемент, который использовался на веб-страницах для автоматической прокрутки текста или изображения вверх, вниз, влево, вправо.

Сегодня никто не использует этот тег. Считается, что нет никакой пользы от непрерывной прокрутки текста. Никто не захочет читать текст, который все время прокручивается.

Но если вам все же необходимо создать эффект marquee, здесь вы можете найти альтернативные способы для этого с помощью CSS, JavaScript и jQuery.

Создайте эффект marquee с помощью CSS анимаций (горизонтально и вертикально)

Используйте CSS свойства animation, transform вместе с правилом @keyframes для создания эффекта marquee без использования тега <marquee>.

Для горизонтальной прокрутки текста установите свойство animation в значение "marquee 10s linear infinite;" (измените секунды в зависимости от ваших требований). Дальше задайте, чтобы анимация проигрывалась:

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

А сейчас увидим, какой вид имеет прокручиваемый текст справа налево:

Пример

<!DOCTYPE html>
<html>
  <title>Заголовок документа</title>
  <head>
    <style>
      div {
      background-color: #1c87c9;
      color: #fff;
      padding: 5px;
      }
      p {
      -moz-animation: marquee 10s linear infinite;
      -webkit-animation: marquee 10s linear infinite;
      animation: marquee 10s linear infinite;
      }
      @-moz-keyframes marquee {
      0% { transform: translateX(100%); }
      100% { transform: translateX(-100%); }
      }
      @-webkit-keyframes marquee {
      0% { transform: translateX(100%); }
      100% { transform: translateX(-100%); }
      }
      @keyframes marquee {
      0% { 
      -moz-transform: translateX(100%);
      -webkit-transform: translateX(100%);
      transform: translateX(100%) }
      100% { 
      -moz-transform: translateX(-100%);
      -webkit-transform: translateX(-100%);
      transform: translateX(-100%); }
      }
    </style>
  </head>
  <body>
    <div>
      <p>Горизонтально прокручиваемый текст без использования тега  marquee.</p>
    </div>
  </body>
</html>

А теперь попробуем получить вертикально прокручиваемый текст. В этом случае необходимо изменить значения свойства transform:

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

Смотрите, как будет выглядеть текст, прокручиваемый снизу вверх:

Пример

<!DOCTYPE html>
<html>
  <title>Заголовок документа</title>
  <head>
    <style>
      div {
      background-color: #1c87c9;
      color: #fff;
      text-align: center;
      }
      p {
      display: inline-block;
      padding-top: 100%;
      -moz-animation: marquee 5s linear infinite;
      -webkit-animation: marquee 5s linear infinite;
      animation: marquee 5s linear infinite;
      }
      @-moz-keyframes marquee {
      0%   { transform: translate(0, 0); }
      100% { transform: translate(0, -100%); }
      }
      @-webkit-keyframes marquee {
      0%   { transform: translate(0, 0); }
      100% { transform: translate(0, -100%); }
      }
      @keyframes marquee {
      0%   { 
      -moz-transform: translate(0, 0);
      -webkit-transform: translate(0, 0);
      transform: translate(0, 0); }
      100% { 
      -moz-transform: translate(0, -100%);
      -webkit-transform: translate(0, -100%);
      transform: translate(0, -100%); }
      }
    </style>
  </head>
  <body>
    <div>
      <p>Вертикально прокручиваемый текст без использования тега marquee.</p>
    </div>
  </body>
</html>

Можно использовать псевдокласс :hover вместе со свойством animation-play-state, чтобы остановить прокрутку текста при наведении курсора мыши. Установите свойство animation-play-state в значение "paused":

:hover {
    animation-play-state: paused;
  }

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      .marquee {
      margin: 0 auto;
      width: 600px;
      height: 30px;
      white-space: nowrap;
      overflow: hidden;
      box-sizing: border-box;
      position: relative;
      }
      .marquee:before, .marquee:after {
      position: absolute;
      top: 0;
      width: 50px;
      height: 30px;
      content: "";
      z-index: 1;
      }
      .marquee:before {
      left: 0;
      background: linear-gradient(to right, #ccc 10%, transparent 80%);
      }
      .marquee:after {
      right: 0;
      background: linear-gradient(to left, #ccc 10%, transparent 80%);
      }
      .marquee__content {
      width: 300%;
      display: flex;
      line-height: 30px;
      animation: marquee 10s linear infinite forwards;
      }
      .marquee__content:hover {
      animation-play-state: paused;
      }
      .list-inline {
      display: flex;
      justify-content: space-around;
      width: 33.33%;
      /* reset list */
      list-style: none;
      padding: 0;
      margin: 0;
      }
      @keyframes marquee {
      0% {
      transform: translateX(0);
      }
      100% {
      transform: translateX(-66.6%);
      }
      }
    </style>
  </head>
  <body>
    <div class="marquee">
      <div class="marquee__content">
        <ul class="list-inline">
          <li>Текст 1</li>
          <li>Текст 2</li>
          <li>Текст 3</li>
          <li>Текст 4</li>
          <li>Текст 5</li>
        </ul>
        <ul class="list-inline">
          <li>Текст 1</li>
          <li>Текст 2</li>
          <li>Текст3</li>
          <li>Текст 4</li>
          <li>Текст 5</li>
        </ul>
        <ul class="list-inline">
          <li>Текст 1</li>
          <li>Текст 2</li>
          <li>Текст 3</li>
          <li>Текст 4</li>
          <li>Текст 5</li>
        </ul>
      </div>
    </div>
  </body>
</html>

Создайте эффект marquee с помощью JavaScript

В данном примере использовано vanilla JS:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      body {
      font-family: sans-serif;
      font-weight: 700;
      height: 600vh;
      background: #d66d75;
      background: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
      }
      .marquee {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      }
      .marquee .inner {
      position: relative;
      width: 100%;
      display: flex;
      color: white;
      font-size: 8rem;
      }
      .marquee .inner > * {
      white-space: nowrap;
      padding: 0 4rem;
      }
    </style>
  </head>
  <body>
    <div class="marquee">
      <div class="inner">
        <p>Привет всем.</p>
      </div>
    </div>
    <script>
      function handleMarquee(){
      	const marquee = document.querySelectorAll('.marquee');
      	let speed = 4;
      	let lastScrollPos = 0;
      	let timer;
      	
      	marquee.forEach(function(el){
      		const container = el.querySelector('.inner');
      		const content = el.querySelector('.inner > *');
      		//Get total width
      		const  elWidth = content.offsetWidth;
      		
      		
      		//Duplicate content
      		let clone = content.cloneNode(true);
      		container.appendChild(clone);
      		
      		let progress = 1;
      		function loop(){
      			progress = progress-speed;
      			if(progress <= elWidth*-1) {progress=0;}
      			container.style.transform = 'translateX(' + progress + 'px)';
      			container.style.transform += 'skewX(' + speed*0.4 + 'deg)';
      			
      			window.requestAnimationFrame(loop);
      		}
      		loop();
      	});
      	
      	window.addEventListener('scroll', function(){
      		const maxScrollValue = 12;
      		const newScrollPos = window.scrollY;
      		let scrollValue = newScrollPos - lastScrollPos;
      		
      		
      		if( scrollValue > maxScrollValue ) scrollValue = maxScrollValue;
          else if( scrollValue < -maxScrollValue ) scrollValue = -maxScrollValue;
      		
      		speed = scrollValue;
      		
      		clearTimeout(timer);
          timer = setTimeout(handleSpeedClear, 10);
      	});
      	
      	function handleSpeedClear(){
      		speed = 4;
      	}
      };
      
      handleMarquee();
    </script>
  </body>
</html>

Создайте плагин скроллинга текста с помощью jQuery

Использование jQuery - это альтернативный способ получения эффекта marquee. Давайте шаг за шагом научимся использовать этот метод:

  1. Включите библиотеку jQuery и Marquee.js в заголовок:
<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>
  1. Включите jQuery плагин для функций плавности (easing):
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
  1. Добавьте разметку (markup):
<div class="marquee">Some text goes here.</div>
  1. Вызовите плагин:
<script>
$(function(){
$('.marquee').marquee();		
});
</script>
  1. Задайте эти функции, если хотите переформировать функциональные характеристики по умолчанию:
$(function(){
  $('.marquee').marquee({

  //если хотите всегда анимировать при помощи jQuery
  allowCss3Support: true,

  //работает, когда allowCss3Support установлено в true - смотрите полный список http://www.w3.org/TR/2013/WD-css3-transitions-20131119/#transition-timing-function
  css3easing: 'linear',

  //требует jQuery easing плагин. По умолчанию - 'linear'
  easing: 'linear',

  //приостанавливает время перед стартом следующей анимации в миллисекундах
  delayBeforeStart: 1000,
  //'left', 'right', 'up' or 'down'
  direction: 'left',

  //true или false - должен ли marquee быть дублирован для эффекта продолжающегося потока
  duplicated: false,

  //скорость marquee в миллисекундах
  duration: 5000,

  //расстояние в пикселях между бегущими строками
  gap: 20,

  //приостанавливает цикл marquee
  pauseOnCycle: false,

  //приостанавливает marquee при наведении курсора мыши - используя плагин jQuery https://github.com/tobia/Pause
  pauseOnHover: false,

  //marquee виден, когда он изначально позиционирован у границы по направлении которой будет двигаться startVisible: false
  
  });
});

Посмотрим как это будет выглядеть:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
  </head>
  <body>
    <div class="marquee">Какой-либо текст.</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(){
        $('.marquee').marquee({
      
      
        //если хотите всегда анимировать при помощи jQuery
        allowCss3Support: true,
      
        //работает, когда allowCss3Support установлено в true - смотрите полный список http://www.w3.org/TR/2013/WD-css3-transitions-20131119/#transition-timing-function
        css3easing: 'linear',
      
        //требует jQuery easing плагин. По умолчанию - 'linear'
        easing: 'linear',
      
        //приостанавливает время перед стартом следующей анимации в миллисекундах
        delayBeforeStart: 1000,
        //'left', 'right', 'up' or 'down'
        direction: 'left',
      
        //true или false - должен ли marquee быть дублирован для эффекта продолжающегося потока
        duplicated: false,
      
        //скорость marquee в миллисекундах
        duration: 5000,
      
        //расстояние в пикселях между бегущими строками
        gap: 20,
      
        //приостанавливает цикл marquee
        pauseOnCycle: false,
      
        //приостанавливает marquee при наведении курсора мыши - используя плагин jQuery https://github.com/tobia/Pause
        pauseOnHover: false,
      
        //marquee виден, когда он изначально позиционирован у границы, по направлении которой будет двигаться
        startVisible: false
        
        });
      });
    </script>
  </body>
</html>