Атрибут loop тега <marquee>
Описание
Атрибут loop для тега <marquee> определял количество циклов анимации бегущей строки. Этот устаревший атрибут не поддерживается в HTML5 и имеет ограниченную функциональность.
<marquee loop="3">
Текст прокрутится 3 раза и остановится
</marquee>
<marquee loop="-1">
Бесконечная прокрутка (по умолчанию)
</marquee>
Современная альтернатива с CSS и JavaScript:
<style>
.modern-marquee {
white-space: nowrap;
animation: scroll 10s linear 3; /* 3 повторения */
}
@keyframes scroll {
from { transform: translateX(100%); }
to { transform: translateX(-100%); }
}
</style>
<div class="modern-marquee" id="limited-loop">
Текст с ограниченным количеством повторов
</div>
<script>
document.getElementById('limited-loop').addEventListener('animationend', function() {
console.log('Анимация завершена');
});
</script>
Сравнение возможностей:
| Функция | Устаревший loop | Современный подход |
|---|---|---|
| Количество повторов | Число или -1 | Любое число или infinite |
| Обратные вызовы | Нет | События animationend |
| Гибкость | Ограниченная | Полный контроль |
Рекомендации по реализации:
- Используйте CSS-свойство
animation-iteration-count - Для сложной логики применяйте JavaScript-обработчики событий
- Рассмотрите библиотеки анимации (GSAP, Anime.js) для продвинутых эффектов
- Оптимизируйте производительность анимаций
Пример с контролем через JavaScript:
<style>
.js-controlled {
white-space: nowrap;
}
</style>
<div class="js-controlled" id="custom-loop">
Полностью контролируемая анимация
</div>
<script>
const element = document.getElementById('custom-loop');
let count = 0;
const maxLoops = 3;
function animate() {
count++;
if(count <= maxLoops) {
element.style.transform = 'translateX(100%)';
element.style.transition = 'none';
setTimeout(() => {
element.style.transition = 'transform 10s linear';
element.style.transform = 'translateX(-100%)';
}, 50);
}
}
element.addEventListener('transitionend', animate);
animate();
</script>
Ограничения устаревшего подхода:
- Нет точного контроля за завершением анимации
- Ограниченные возможности настройки
- Плохая производительность
- Не поддерживается в современных стандартах
Примечание: Для профессиональных решений с анимацией текста рассмотрите использование специализированных библиотек, которые обеспечивают лучшую производительность, контроль и кросс-браузерную совместимость.