Как решить проблему с тегом marquee?
Добрый день, проверял HTML на валидность, и получил следующую ошибку
Element marquee not allowed as child of element div in this context. |
Element marquee not allowed as child of element div in this context.
Элемент выглядит вот так
<marquee class="brands__line brands-line" behavior="alternate" direction="right" scrolldelay="50"> |
<marquee class="brands__line brands-line" behavior="alternate" direction="right" scrolldelay="50">
Я знаю что marquee это плохое решение, но не я писал код а переписывать по нормальному будет муторно, так что как избавиться от этой ошибки
Дополнительно:
а marquee внутри чего лежит?
забить, использовать другие решения на css или js или не использовать эту фигню в принципе https://stackoverflow.com/questions/15128716/html-...
Я полностью одобряю любой из вариантов :)
А почему бы не выкинуть это все?
Есть куча слайдеров, каруселей, да хотя бы и список компаний обычными лычками заполнить. Сейчас очень широкий выбор
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Проблема с тегом marquee заключается в том, что он является устаревшим и не рекомендуется к использованию в современной веб-разработке. Тег marquee был введен в HTML для создания анимированного текста, который двигается по горизонтали или вертикали на веб-странице. Однако, его использование затрудняет доступность и ухудшает пользовательский опыт, поэтому рекомендуется избегать его.
Вместо тега marquee вы можете использовать CSS анимации или JavaScript для создания аналогичных эффектов. Ниже приведен пример использования CSS анимации для создания анимированного текста:
@keyframes marquee {
0% { transform: translateX(0); }
100% { transform: translateX(-100%); }
}
.marquee {
white-space: nowrap;
overflow: hidden;
animation: marquee 5s linear infinite;
}
<div class="marquee">Your scrolling text goes here</div> |
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } .marquee { white-space: nowrap; overflow: hidden; animation: marquee 5s linear infinite; } <div class="marquee">Your scrolling text goes here</div>
В этом примере мы создали CSS анимацию с помощью @keyframes, которая делает текст двигающимся слева направо. Вы можете настроить параметры анимации (например, скорость и направление) в соответствии с вашими потребностями.
Если вам все же необходимо использовать тег marquee, то вам следует учитывать его ограничения и рекомендации по доступности. Например, вы можете добавить атрибуты direction, behavior и scrollamount для управления направлением, поведением и скоростью анимации. Однако, помните, что это не самое рекомендуемое решение.
В итоге, для решения проблемы с тегом marquee, рекомендуется использовать современные подходы, такие как CSS анимации или JavaScript, для создания аналогичных эффектов, обеспечивая при этом лучшую доступность и опыт пользователей.
Проблема с тегом marquee возникает из-за того, что данный тег является устаревшим и не рекомендуется к использованию в современном веб-разработке. Вместо этого, для создания анимированных эффектов на веб-страницах рекомендуется использовать CSS анимации или JavaScript.
Однако, если вам все же необходимо использовать тег marquee, можно решить проблему следующим образом:
1. Используйте атрибуты direction, behavior и scrollamount для управления направлением, поведением и скоростью анимации. Например:
Текст, который будет анимироваться
2. Для остановки анимации при наведении курсора мыши, можно использовать JavaScript. Например:
Текст, который будет анимироваться
3. Если вам необходимо изменить скорость анимации динамически, можно использовать JavaScript для управления атрибутом scrollamount. Например:
Текст, который будет анимироваться var marquee = document.getElementById('myMarquee'); var speed = 3; // начальная скорость анимации function increaseSpeed() { speed += 1; // увеличиваем скорость на 1 marquee.setAttribute('scrollamount', speed); // устанавливаем новую скорость } function decreaseSpeed() { speed -= 1; // уменьшаем скорость на 1 marquee.setAttribute('scrollamount', speed); // устанавливаем новую скорость }Текст, который будет анимироваться var marquee = document.getElementById('myMarquee'); var speed = 3; // начальная скорость анимации function increaseSpeed() { speed += 1; // увеличиваем скорость на 1 marquee.setAttribute('scrollamount', speed); // устанавливаем новую скорость } function decreaseSpeed() { speed -= 1; // уменьшаем скорость на 1 marquee.setAttribute('scrollamount', speed); // устанавливаем новую скорость }
Надеюсь, эти рекомендации помогут вам решить проблему с тегом marquee. Однако, рекомендуется пересмотреть использование данного тега и перейти к более современным методам создания анимации на веб-страницах.