Атрибут height тега <marquee>
Описание
Атрибут height для тега <marquee> задает высоту области бегущей строки. Этот устаревший атрибут использовался преимущественно для вертикальной анимации (с direction="up" или direction="down").
<marquee height="100" direction="up">
Линия 1<br>
Линия 2<br>
Линия 3
</marquee>
Современная альтернатива с CSS:
<style>
.vertical-scroll {
height: 100px;
overflow: hidden;
position: relative;
}
.vertical-scroll-content {
position: absolute;
animation: scrollUp 10s linear infinite;
}
@keyframes scrollUp {
from { transform: translateY(0); }
to { transform: translateY(-100%); }
}
</style>
<div class="vertical-scroll">
Линия 1<br>
Линия 2<br>
Линия 3
</div>
</div>
Основные отличия подходов:
| Аспект | Устаревший (height) | Современный (CSS) |
|---|---|---|
| Синтаксис | HTML-атрибут | CSS-свойство |
| Гибкость | Фиксированная высота | Адаптивная, относительные единицы |
| Производительность | Низкая | Оптимизированная |
Рекомендации по реализации:
- Используйте CSS-свойство
heightвместо HTML-атрибута - Для адаптивности применяйте относительные единицы (vh, %)
- Добавляйте
overflow: hiddenдля обрезки контента - Используйте transform для плавной анимации
Пример с адаптивной высотой:
<style>
.responsive-scroll {
height: 20vh; /* 20% от высоты viewport */
max-height: 200px;
}
</style>
<div class="vertical-scroll responsive-scroll">
<div class="vertical-scroll-content">
Адаптивная бегущая строка
</div>
</div>
Ограничения устаревшего подхода:
- Только пиксельные значения (px)
- Нет поддержки адаптивного дизайна
- Конфликты с современными стандартами
- Плохая производительность анимации
Примечание: Для сложных вертикальных анимаций с контролем скорости и направления рекомендуется использовать JavaScript-библиотеки анимации, такие как GreenSock (GSAP) или Anime.js, которые обеспечивают лучшую производительность и контроль.