Замена и аналоги устаревшего тега <marquee> в HTML

Быстрый ответ

Оставим в прошлом тег <marquee>. Для реализации современных эффектов прокрутки используйте CSS-анимации и keyframes:

@keyframes scroll-text {
  to { transform: translateX(-100%); }
}

.marquee {
  overflow: hidden;
  white-space: nowrap;
  display: inline-block;
  animation: scroll-text 10s linear infinite;
}

<div class="marquee">Новая эра прокрутки!</div>

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

Причины устаревания

Тег <marquee>, когда-то знаменитый за свой эффект бегущей строки, стал устаревшим из-за своего непредсказуемого поведения и нестабильности. В то время как HTML служит структурированию контента, CSS — его оформлению. Тег <marquee> смешивает эти две области.

- **Причины устаревания**:
  – Неконтролируемое поведение
  – Проблемы с доступностью
  – Нарушение разделения HTML и CSS

Сегодня анимации на CSS и JavaScript библиотеки предлагают более продвинутые способы создания скроллинг-эффектов.

Прогресс с помощью CSS и JavaScript

CSS для современных эффектов прокрутки

CSS-анимации позволяют создать эффекты прокрутки ещё более изысканными и захватывающими:

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

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

Вы можете настроить скорость и тайминг анимации, чтобы она отвечала вашим требованиям.

Подробнее об этом расскажет наш спикер на видео

JavaScript для продвинутого управления

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

document.querySelector('.marquee').addEventListener('mouseenter', function(e) {
  e.target.style.animationPlayState = 'paused';
});

document.querySelector('.marquee').addEventListener('mouseleave', function(e) {
  e.target.style.animationPlayState = 'running';
});

JavaScript открывает возможности для добавления интерактивности и динамичности в ваши скроллинг-анимации.

Визуализация

Сравните тег <marquee> с примитивным iPod в мире, где все уже используют Spotify.

Тег: <marquee>         → iPod (Устарел, имеет ограничения)
Альтернатива: CSS анимации → Spotify (Гибкий, современный)

@keyframes slideIn {
  from { transform: translateX(100%); }
  to { transform: translateX(-100%); }
}
.myElement {
  animation: slideIn 10s infinite linear;
}

Подводя итог:

iPod → 🚫 Устарел: Функционал ограничен, управление неудобно.

Spotify → 🙌 Вариант предпочтительнее: Гибкость, адаптация, интерактивность.

Пришла пора обновиться! До свидания, старый iPod, и приветствуем новую эру с Spotify.

Создание персональных анимаций прокрутки

Упрощённая разработка с CSS

Структурируйте HTML так, чтобы он был в гармонии с вашими анимациями. Используйте overflow: hidden для скрытия лишних элементов, а white-space: nowrap чтобы контент был в одной строке:

<div class="marquee-container">
  <div class="marquee-content">Стильная прокрутка текста без использования устаревшего <marquee>.</div>
</div>

Гладкое внедрение с помощью современного CSS

Применяйте эффективные CSS-свойства для более плавной анимации:

.marquee-container {
  display: inline-block;
  overflow: hidden;
}
.marquee-content {
  display: inline-block;
  white-space: nowrap;
  animation: marquee-ltr 10s linear infinite;
}

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

Полезные материалы

1. <marquee>: Элемент Marquee – MDN — полное описание устаревшего элемента <marquee>, предоставленное MDN.
2. CSS Animations Level 1 — спецификация CSS-анимаций от W3C, cовременное продолжение традиций <marquee>.
3. scroll-behavior | CSS-Tricks — гид по созданию великолепных эффектов прокрутки на CSS без использования <marquee>.
4. WebAIM: Невидимый контент для пользователей скринридеров — подход WebAIM к проблемам <marquee> и его доступным альтернативам.
5. Avoiding common HTML5 mistakes — анализ распространённых ошибок при использовании HTML5 и лучшие практики по использованию веб-стандартов.
6. Can I use... Support tables for HTML5, CSS3, etc — таблицы совместимости для свойств CSS, относящихся к прокрутке текста.