Как создать эффект 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%); }
}

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

Пример



  Заголовок документа
  
    
  
  
    

      
Горизонтально прокручиваемый текст без использования тега  marquee.

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

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

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

Пример



  Заголовок документа
  
    
  
  
    

      
Вертикально прокручиваемый текст без использования тега marquee.

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

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

Пример



  
    Заголовок документа
    
  
  
    

      

        
    
          
  • Текст 1
    • 
          
  • Текст 2
    • 
          
  • Текст 3
    • 
          
  • Текст 4
    • 
          
  • Текст 5
    • 
        

        
    
          
  • Текст 1
    • 
          
  • Текст 2
    • 
          
  • Текст3
    • 
          
  • Текст 4
    • 
          
  • Текст 5
    • 
        

        
    
          
  • Текст 1
    • 
          
  • Текст 2
    • 
          
  • Текст 3
    • 
          
  • Текст 4
    • 
          
  • Текст 5
    •

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

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

Пример



  
    Заголовок документа
    
  
  
    

      

        
Привет всем.

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

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

  1. Включите библиотеку jQuery и Marquee.js в заголовок:
  1. Включите jQuery плагин для функций плавности (easing):
  1. Добавьте разметку (markup):
Some text goes here.
  1. Вызовите плагин:
  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
  
  });
});

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

Пример



  
    Заголовок документа
  
  
    
Какой-либо текст.