Атрибут scrollamount тега <marquee>
Описание
Атрибут scrollamount для тега <marquee> определял скорость прокрутки содержимого в пикселях за интервал обновления. Этот устаревший атрибут не рекомендуется к использованию в современных веб-проектах.
<marquee scrollamount="10">
Быстрая прокрутка текста
</marquee>
<marquee scrollamount="2">
Медленная прокрутка текста
</marquee>
Современная альтернатива с CSS:
<style>
.fast-scroll {
animation: scroll 5s linear infinite;
}
.slow-scroll {
animation: scroll 15s linear infinite;
}
@keyframes scroll {
from { transform: translateX(100%); }
to { transform: translateX(-100%); }
}
</style>
<div class="fast-scroll">
Быстрая анимация (аналог scrollamount="10")
</div>
<div class="slow-scroll">
Медленная анимация (аналог scrollamount="2")
</div>
Сравнение параметров скорости:
| Тип скорости | scrollamount | CSS-аналог (duration) |
|---|---|---|
| Очень медленно | 1 | 20s |
| Медленно | 2-3 | 10-15s |
| Средняя | 4-6 | 5-8s |
| Быстрая | 10+ | 2-4s |
Рекомендации по реализации:
- Используйте CSS-свойство
animation-duration - Для плавности добавьте
will-change: transform - Экспериментируйте с timing-function (linear, ease-in-out)
- Оптимизируйте производительность с помощью
transform
Пример с динамическим контролем скорости:
<div class="scroll-container" id="speed-demo">
Текст с изменяемой скоростью
</div>
<input type="range" min="1" max="20" value="5"
oninput="changeSpeed(this.value)">
<script>
function changeSpeed(speed) {
const duration = 20 / speed;
document.getElementById('speed-demo').style.animationDuration = `${duration}s`;
}
</script>
Ограничения устаревшего подхода:
- Фиксированная скорость в пикселях
- Нет адаптации под разные размеры экрана
- Плохая производительность анимации
- Отсутствие плавного управления
Примечание: Для профессиональных решений с контролем скорости анимации рекомендуется использовать библиотеки вроде GSAP, которые обеспечивают аппаратное ускорение и точный контроль над временными параметками анимации.