Атрибут truespeed тега <marquee>
Описание
Атрибут truespeed для тега <marquee> был булевым атрибутом, который заставлял браузер соблюдать точные значения scrolldelay без минимального ограничения в 60 мс. Этот атрибут является устаревшим и не поддерживается в современных стандартах HTML.
<marquee scrolldelay="10" truespeed>
Очень быстрая прокрутка (без минимальной задержки 60 мс)
</marquee>
Современная альтернатива с CSS:
<style>
.high-speed-scroll {
animation: scroll 1s linear infinite;
will-change: transform;
}
@keyframes scroll {
from { transform: translateX(100%); }
to { transform: translateX(-100%); }
}
</style>
<div class="high-speed-scroll">
Ультра-быстрая анимация с CSS
</div>
Ключевые отличия:
| Аспект | truespeed (устаревший) | CSS-анимация |
|---|---|---|
| Контроль скорости | Точное значение scrolldelay | Полный контроль через duration |
| Производительность | Низкая (перерисовка DOM) | Высокая (аппаратное ускорение) |
| Плавность | Дискретная прокрутка | Истинно плавная анимация |
Рекомендации по реализации:
- Используйте
animation-durationдля контроля скорости - Добавьте
will-change: transformдля оптимизации - Для сложных анимаций используйте
requestAnimationFrame - Рассмотрите библиотеки анимации (GSAP) для профессиональных решений
Пример с JavaScript-контролем:
<div id="js-controlled-scroll">
Анимация с точным контролем скорости через JS
</div>
<script>
const element = document.getElementById('js-controlled-scroll');
let start = null;
const duration = 1000; // 1 секунда на полный цикл
function step(timestamp) {
if (!start) start = timestamp;
const progress = (timestamp - start) % duration;
const translateX = 100 - (progress / duration) * 200;
element.style.transform = `translateX(${translateX}%)`;
requestAnimationFrame(step);
}
requestAnimationFrame(step);
</script>
Ограничения устаревшего подхода:
- Нет реального контроля над плавностью
- Ограниченная поддержка браузерами
- Плохая производительность при высокой скорости
- Удален из спецификации HTML5
Примечание: Для создания современных, производительных анимаций текста рекомендуется полностью отказаться от тега <marquee> в пользу CSS-анимаций или специализированных JavaScript-библиотек, которые обеспечивают лучший контроль и плавность.