Выделяющий элемент

Видео HTML-шатра с текстом «Arc.Ask3.Ru».

— Тег Marquee это нестандартный элемент HTML , который автоматически прокручивает текст вверх, вниз, влево или вправо. Этот тег был впервые представлен в ранних версиях Microsoft и Internet Explorer сравнивался с Netscape элементом блинка , как проприетарное нестандартное расширение стандарта HTML, имеющее проблемы с удобством использования. W3C не рекомендует использовать его в документах HTML.

Проблемы с юзабилити

Вывеска может отвлекать. ^[1] Человеческий глаз привлекает движение, ^[2] и текст выделения постоянно перемещается.

Как и в случае с элементом блинка , изображения или текст, помеченные рамкой, не всегда полностью видны на визуализируемых страницах, что делает печать таких страниц неэффективной (если не невозможной) задачей; обычно требуется несколько попыток, чтобы захватить весь текст, который может отображаться при прокрутке или мигании сообщений. behavior="alternate" Версия выделения приводит к дрожанию текста вперед и назад, но не закрывает какую-либо его часть, если ширина прокрутки установлена правильно.

Поскольку выделенный текст перемещается, по ссылкам внутри него труднее щелкнуть, чем по ссылкам в статическом тексте, в зависимости от скорости и продолжительности прокрутки. Пользователи получают только один шанс каждый раз, когда он прокручивается мимо. Кроме того, слишком быстрая прокрутка текста может сделать его нечитаемым для некоторых людей, особенно для людей с нарушениями зрения. Это может легко расстроить пользователей. Чтобы бороться с этим, сценарии на стороне клиента позволяют программировать выделение так, чтобы оно останавливалось, когда на него наводится указатель мыши.

Атрибуты

Это новая Arc.Ask3.Ru!

Пример текста выделения из первого редактирования в Википедии (выполнено с помощью CSS; сам тег выделения устарел и больше не работает в большинстве браузеров)

В отличие от своего мигающего аналога, элемент выделения имеет несколько атрибутов , которые можно использовать для управления и настройки внешнего вида выделения.

align

Использует тот же синтаксис, что и элемент img .

behavior

Позволяет пользователю установить один из трех различных типов поведения рамки:

Прокрутка (по умолчанию) — прокручивает текст справа налево и возобновляет его с правой стороны области выделения, когда он достигает левой стороны. Текст исчезает после завершения цикла.
Слайд — при использовании при отсутствии атрибута «Поведение» прокручиваемое содержимое будет перемещаться по всей длине рамки, но останавливается в тот момент, когда оно достигает конца, так что содержимое будет отображено. Но если он используется с атрибутом «Поведение», то атрибут «Слайд» будет игнорироваться.

Петли подсчитываются каждый раз, когда они достигают каждого конца шатра; цикл со значением 1 отличается от атрибута «Слайд». когда элемент прокручивается с атрибутом «Слайд», элемент постоянно останавливается в конце длины рамки, отображая весь элемент. Однако, когда элемент прокручивается без атрибута «Цикл», количество прокруток будет повторяться в зависимости от того, какому числу равен «Цикл». Если «Loop=1», то элемент будет прокручиваться только один раз и полностью выйдет за пределы рамки, а остановка прокручиваемого элемента будет такой же, как и «Слайд». По умолчанию «Loop=infinite», поэтому нет необходимости кодировать атрибут «Loop», если вам нужна непрерывная прокрутка. Примечание. «Цикл» будет игнорироваться, если закодирован атрибут «Поведение». Кроме того, если «Behavior=Alternate» и «Loop=2», элемент будет перемещаться от начала области выделения до конца и обратно к началу, считая путешествие туда и обратно за 2 цикла.

Альтернативный вариант : прокручивает текст справа налево и возвращается назад слева направо.

bgcolor: Устанавливает цвет фона выделения.
direction: Устанавливает направление рамки выделения. Значения: влево, вправо, вверх, вниз, где значение указывает направление движения. direction=left поэтому перемещает текст справа налево на экране.
width: Это определяет, насколько широкой должна быть область выделения.
loop: Это устанавливает, сколько раз область выделения должна «зацикливать» свой текст. Каждая поездка считается за один круг.
scrollamount: Это количество пикселей, на которое текст перемещается между «фреймами». Таким образом, Scrollamount=1 дает самую медленную скорость прокрутки.
scrolldelay: Это устанавливает промежуток времени в миллисекундах между «кадрами», очень похоже на просмотр повтора видео, где каждый кадр видео будет приостановлен на x миллисекунд. «Scrolldelay=1000» означает замедленное движение, при котором каждый кадр длится тысячу миллисекунд или одну секунду.

Элемент выделения может содержать произвольный HTML-код, поэтому помимо текста он может перемещать одно или несколько изображений, фрагментов видеороликов или анимированных GIF-файлов .

Выполнение

Тег marquee устарел в большинстве браузеров, но то же самое поведение все еще можно реализовать с помощью каскадных таблиц стилей , например:

@keyframes marquee {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(-100%);
    }
}

.marquee-container {
    white-space: nowrap;
    overflow: hidden;
    position: relative;
    animation: marquee 10s linear infinite;
}

.marquee-content {
    display: inline-block;
}

Анимация, marquee, определяется его @keyframes быть простым переводом справа налево; можно было бы обратить анимацию, инвертировав ее (например, с -100% на 100%). 10s также может быть изменен для изменения его вывода.

Затем этот стиль можно вызвать в HTML:

<div class="marquee-container"><div class="marquee-content">The freakin' geese are on the lease!</div></div>

Чертовы гуси сданы в аренду!

Согласие

Элемент marquee был впервые изобретен для Microsoft и Internet Explorer поддерживается им. Веб-браузеры Firefox , Chrome и Safari поддерживают его для совместимости с устаревшими страницами. Элемент несовместим с HTML . Свойства CSS были предложены для достижения того же эффекта, который указан в модуле Marquee Level 3, от которого отказались без реализации в 2014 году. ^[3] Аналогичных эффектов можно достичь и за счет использования JavaScript , ^[4] или анимацию CSS3 . ^[5]

Ссылки

^ «Глоссарий » шатер» . Юзабилити прежде всего . Форейкер . Проверено 14 марта 2010 г.
^ Тим Луи Макалузо (27 мая 2009 г.). «Исследование показывает, что глаза отказываются от слов ради движения» . Газета Рочестер-Сити . Архивировано из оригинала 1 июня 2009 г. Проверено 14 марта 2010 г.
^ Модуль CSS Marquee, уровень 3.
^ Шарп, Реми (10 сентября 2008 г.). «Шелковистый гладкий шатер» . Проверено 20 июля 2005 г.
^ liMarquee — альтернативный плагин jQuery для выделения. Создает горизонтальную или вертикальную рамку для текста, изображений, товаров, баннеров или логотипов.

[1] «Глоссарий » шатер» . Юзабилити прежде всего . Форейкер . Проверено 14 марта 2010 г.

[2] Тим Луи Макалузо (27 мая 2009 г.). «Исследование показывает, что глаза отказываются от слов ради движения» . Газета Рочестер-Сити . Архивировано из оригинала 1 июня 2009 г. Проверено 14 марта 2010 г.

[3] Модуль CSS Marquee, уровень 3.

[4] Шарп, Реми (10 сентября 2008 г.). «Шелковистый гладкий шатер» . Проверено 20 июля 2005 г.

[5] Marquee — альтернативный плагин jQuery для выделения. Создает горизонтальную или вертикальную рамку для текста, изображений, товаров, баннеров или логотипов.

[1]

[2]

[3]

[4]

[5]