Атрибут direction тега <marquee>
Описание
Атрибут direction для тега <marquee> определяет направление движения содержимого бегущей строки. Этот атрибут является устаревшим и не рекомендуется к использованию в современных веб-проектах.
<marquee direction="left">
Текст движется слева направо
</marquee>
<marquee direction="right">
Текст движется справа налево
</marquee>
<marquee direction="up" height="100">
Текст движется снизу вверх
</marquee>
<marquee direction="down" height="100">
Текст движется сверху вниз
</marquee>
Значения атрибута:
| Значение | Направление | Современная CSS альтернатива |
|---|---|---|
left |
Справа налево (по умолчанию) | animation: moveLeft |
right |
Слева направо | animation: moveRight |
up |
Снизу вверх | animation: moveUp |
down |
Сверху вниз | animation: moveDown |
Современная реализация на CSS:
<style>
.marquee-left {
animation: scrollLeft 10s linear infinite;
}
.marquee-right {
animation: scrollRight 10s linear infinite;
}
.marquee-up {
animation: scrollUp 10s linear infinite;
height: 100px;
}
.marquee-down {
animation: scrollDown 10s linear infinite;
height: 100px;
}
@keyframes scrollLeft {
from { transform: translateX(100%); }
to { transform: translateX(-100%); }
}
@keyframes scrollRight {
from { transform: translateX(-100%); }
to { transform: translateX(100%); }
}
@keyframes scrollUp {
from { transform: translateY(100%); }
to { transform: translateY(-100%); }
}
@keyframes scrollDown {
from { transform: translateY(-100%); }
to { transform: translateY(100%); }
}
</style>
<div class="marquee-left">Движение влево</div>
<div class="marquee-right">Движение вправо</div>
<div class="marquee-up">Движение вверх</div>
<div class="marquee-down">Движение вниз</div>
Рекомендации по замене:
- Используйте CSS-анимации вместо устаревшего тега
- Для вертикального движения задавайте фиксированную высоту
- Добавляйте
overflow: hiddenдля обрезки выходящего за границы контента - Используйте
white-space: nowrapдля горизонтального движения
Ограничения устаревшего подхода:
- Низкая производительность анимации
- Ограниченный контроль над скоростью и поведением
- Проблемы с доступностью
- Не поддерживается в HTML5
Примечание: Для сложных анимационных эффектов рассмотрите использование JavaScript-библиотек, таких как GSAP или Anime.js, которые предоставляют более гибкие возможности управления анимацией.