Поведение marquee

Статьи о Marquee

Атрибуты и параметры поведения тэга marquee

Сентябрь 2010 г.

В тэге marquee для управления поведением существует атрибут behavior (поведение англ.), по умолчанию он выполняется с параметром scroll (прокрутка англ.), т.е. постоянная прокрутка (скроллинг) установленного в тэг контента.

Кроме scroll, в этом атрибуте есть ещё два параметра: alternate (изменять маршрут англ.) и slide (скользить англ.). Параметр alternate выполняется как возвратно-поступательное движение контента в пределах поля скроллирования.

(Прим: в Mozilla в отличии от Internet Explorer, Google Chrome, Opera, Firefox контент уходит за края скроллинга).

Параметру slide в плане демонстрационности не повезло, так как его задача: одноразовая прокрутка контента с последующей остановкой. На страницах по веб-дизайну в разделах посвящённых бегущей строке в тэге marquee, в примерах с этим параметром контент успевает остановиться к моменту его просмотра. Поэтому для его демонстрации применим замедление строки с помощью атрибута задержки отрисовки scrolldelay:

Дойдя до края поля скроллирования, слово SLIDE должно остановиться. Этот параметр вполне заслуживает внимания, исходя из того, что постоянно бегущая строка на страницах сайта, раздражает многих пользователей Web’а, а скольжение;, первоначально привлекая движением, внимание к контенту, останавливает и приводит его к привычному статичному виду. Но работает этот атрибут, только в IE.

Петли

Немного больше в демонстрационности, повезло атрибуту loop (петля англ.), он задаёт количество прокруток контента помещённого в тэг marquee. По умолчанию задано бесконечное количество прокруток; loop="-1" равнозначно loop="infinite", допустима запись параметра любым целым числом со знаком минус: loop="-2...-n", даже с нулём: loop="0", впрочем нет необходимости устанавливать этот атрибут, если нужен постоянный скроллинг (пока открыт html-документ). Он устанавливается тогда, когда требуется определённое количество прокруток (петель), для примера установим со значением 20 раз:

После двадцати прокруток, контент (слово LOOP), больше не будет выводиться на страницу. Но это верно только для Internet Explorer и для последних версий Opera (8-9), а вот в других веб-браузерах или приложениях с просмотром HTML, воспроизводящих бегущую строку, можно не дождаться выполнения этого параметра, так же как и остановки контента в примере SLIDE. В этом случае эти примеры ничем не будут отличаться, от первого примера простого скроллинга: SCROLL. Подобная ситуация и в случае установки заданного количества разов прокрутки возвратно-поступательного скроллинга:

В большинстве Мозилл, контент не остановиться до закрытия документа. В IE и Opera, контент остановиться обязательно. Местоположение остановленного контента, зависит от чётности петель. Если их количество чётно (как в приведённом примере), то текст будет справа, так как петля, это проход в одну сторону, и каждая вторая возвращает контент к исходному положению, по умолчанию ход контента начинается справа налево. Нечётное количество петель естественно приводит контент к остановке слева.

Для изменения начального положения контента используется атрибут задания направления direction, с параметром right, в скроллинге это смещение контента слева направо.

Если с петлями в alternate есть некоторая стабильность, то петли в slide, это более непредсказуемый вариант. Для сравнения сделаем контрольный вариант <marquee>MARQUEE</marquee>

В IE, контент в отличии от контрольного варианта, не уходит за край скроллинга, а удаляется в конце поля прокрутки; после выполнения всех (30) петель он остановиться, как при обычном выполнении slide с одной петлёй. В Opera этот вариант будет выполнен без петлевого атрибута, т.е. только одноразовый скроллинг. В некоторых приложениях может получиться возвратно- поступательный движение. Ну а в Mozilla Firefox ни slide, ни loop не выполняются, только постоянный скроллинг.

Кенгуру

Любопытства ради, можно поэкспериментировать с атрибутами поведения. Учитывая, то обстоятельство, что все атрибуты бегущей строки выполняются только в Internet Explorer'e, значит просмотр этих извращений лучше делать в нём или в его клонах.
(Кстати многие эффекты, можно создать для любого браузера, но с использованием других методов, с помощью например JavaScript.)
Посмотрим, что будет происходить с контентом, в двух одинаковых тэгах, своего рода кенгуру: <marquee><marquee><!--Контент--></marquee></marquee>
Кенгуру, так кенгуру:

Где direction="down" направление вертикального скроллинга снизу вверх, для этого примера можно использовать параметр up- вертикальный скроллинг сверху вниз, height="60" высота поля скроллинга, в данном случае длина пробега, без указания этого параметра, контент будет занимать всё свободное пространство контейнера.
Посмотрим другие варианты.

Бегущая строка с автоматической остановкой контента, внутренний тэг выполняет возвратно поступательный скроллинг, скорость отрисовки внутреннего и внешнего тэгов, одинаковы, в фазе совпадения направления в обоих тэгах, контент движется, а в противофазе из-за одинаковых скоростей, контент статичен. Время останова и пробега зависит от времени пробега длины скроллинга внутреннего marquee установленного атрибутом ширины width="100".

Бегущая строка с исчезновением контента. Удалим behavior="alternate", теперь направление скроллинга, внутреннего и внешнего тэга, совпадают, длина внутреннего скроллинга ограничена width="50".

Изменением параметров атрибутов можно получить различные варианты скроллинга. Так, что кенгуризм бывает не только забавен, но и полезен. Ну, а извращения в виде матрёшки из трех тэгов, не переварит наверное, даже IE.

Чтобы не утруждая себя, такой замечательной штукой, как JavaScript, скормить Огненному Лису, нашего кенгуру, уточним, почему этот австралийский зверь не желает прыгать. А причина в том, что Firefox, Mozill'ы, Netscape-8 не выполняют параметры высоты height и ширины width скроллинга в тэге бегущей строки. Но зато, они прекрасно выполняют эти параметры в табличной ячейки и layer (лежаке), несмотря на то, что высота в таблице, атрибут невалидный. Ну а marquee скроллирует не только текст, но и подавляющее большинство html-форм. В том числе таблицы и лежаки, даже с помещённым в них marquee, проверим.

Получается вариант скроллинга с периодической остановкой, только в рамке, если рамку не указывать в таблице, то вариант ничем не будет отличаться от второго примера с Кенгуру.

Но таблица немного громоздкое сооружение, лучше использовать Layer. Создадим леер с именем kenga: <div id="kenga"></div>, запишем в голову страницы (<head></head>) через CSS его высоту и ширину: #kenga {width: 100px; height: 60px;}, и установим в него тэг бегущей строки, и всё это вместе, поместим ещё в один marquee, так как мы указали только размер леера, без указания цвета фона, рамки, он не просматривается на странице, только контент.

Теперь кенгуру будет прыгать в Лисе.

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

Можно сделать возвратно-поступательный скроллинг объекта по диагонали, и для этого наиболее подходящим является картинка, возьмём логотип Internet Explorer'a размером 20х20 рх, в дань тому, что этот эффект наилучшим образом работает, именно в этом браузере.

В Лисе и Опере этот эффект работает, но с шероховатостями, которые портят впечатление.
Изменение направления диагонали выполняется изменением параметра направления direction, в одном из marquee, во внешнем это direction="right", но по умолчанию направление задано без указания direction как left, поэтому удобнее делать изменение во внутреннем marquee, т.е. заменим down, на up. А, что бы посмотреть как перемещается контент (в данном примере: картинка) установим цвета полей скроллинга. Внутренний сделаем зелёным (bgcolor="green"), а внешний красным (bgcolor="red")

в начало статьи
Индексация Marquee Marquee в текстовых браузерах Бегущая строка JavaScript Апокриф веб-дизайна Невалидность Marquee