Замена и аналоги устаревшего тега <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, относящихся к прокрутке текста.