Скорость Marquee

Статьи о Marquee

Атрибуты и параметры скорости в тэге бегущей строки

Июль 2009 г.

Смещение контента-ScrollAmount

Эффект Бегущая строка есть последовательная отрисовка и удаление контента, со смещением определённым количеством пикселей, и через заданный период времени в миллисекундах. По умолчанию смещение отрисовки контента в тэге <marquee> равно 6 пикселей, атрибутом смещения является scrollamount (монтирование прокрутки: англ.), в некоторых веб-браузерах при отсутствии этого атрибута, параметр смещения может быть от 2 до 6 пикселей, проверить это можно просматривая документ, с бегущей строкой с кодом <marquee></marquee> разными версиями и типами браузеров, зрительно это воспринимается как разница в скорости.

Если скорость монтирования важна в различных версиях браузерах, атрибут scrollamount, выставляется обязательно. Параметр "0" в scrollamount, запрещает скроллинг контента, значение "1", есть минимальное расстояние между отрисовками:<marquee scrollamount="1">Бегущая строка</marquee>

В большинстве программ автоматической генерации HTML-кода, этот атрибут, чаще всего задаётся в 2 пикселя.
Мы для примера просмотрим вариант со смещением в 10 пикселей scrollamount="10".

Задержка смещения-ScrollDelay

Скорость движения строк в приведённых примерах, воспринимается, разной, однако период времени монтирования во всех трёх примерах одинаков. В различных версиях по умолчанию скорость монтирования определяется операционной системой в которой установлен браузер. Для Windows она равна 85 миллисекундам. Пока Internet Explorer оставался единственным веб клиентом воспроизводившим бегущую строку в тэге marquee, речь шла о разности скорости в IE (Windows) и IE (Macintosh), сейчас когда самые последние версии популярных браузеров (Opera, Mozilla, Konqueror) тоже стали воспроизводить тэг бегущей строки, а они портируются не только в Windows, но и в Юниксы и юниксоподобные операционные системы, разница в скорости достаточно заметна. Поэтому установка параметров скроллинга актуальна, при построении сюжетов в которых скорость движения контента имеет значение.
Период времени между отрисовками задаётся атрибутом scrolldelay (задержка монтирования: англ.) в миллисекундах (1 msek=0,001 sek), по умолчанию задан параметр 0, т.е. задержка определяется операционной системой. Для управления задержкой задаётся любое целое число больше значения установленного в ОС. Для наглядности установим задержку в две секунды, и расстояние между отрисовками в 100 пикселей.
<marquee scrollamount="100" scrolldelay="2000">Бегущая строка</marquee>

Снятие ограничения задержки смещения-TrueSpeed

Для снятия дефолтной задержки операционной системы, используется атрибут truespeed (верная скорость: англ.). В html разметке этот атрибут записывается так: <marquee scrolldelay="" truespeed>, в xhtml соответственно <marquee scrolldelay="" truespeed="truespeed">. Установим задержку отрисовки 20 миллисекунды, для данной страницы:
<marquee scrolldelay="20" truespeed="truespeed">Бегущая строка</marquee>

Несмотря на то, что ограничение установлено операционной системой снято, в различных типах браузеров, скорость будет различна. Для сравнения ещё раз сделаем строку из первого примера. При желании и наличии нескольких клиентов в одной ОС, можно просмотреть эту страницу и убедиться в разнице воспроизведения (просто сверяя количество прокруток в обоих примерах, в IE строка с truespeed успевает прокрутится четыре раза, Opera или Mozilla два, в этих браузерах, скорость монтирования будет не менее 60 миллисекунд).

Минимальным значением естественно возможна задержка в 1 msek, scrolldelay="1", рассмотрим этот пример.

В Internet Explorer контент будет мелькать, а в Opera, Firefox скорость как сказано выше установится 60 мсек и это разумно, при скорости ниже 50-60, контент не воспринимается из-за эффекта мелькания (просмотр в IE, убедительно доказывает это) . Но если посмотреть строку со смещением в 1 пиксель (Пример 2), то хочется назвать её, не бегущей, а ползущей строкой, но визуально она приятна для глаз. Вот, что-бы получить бегущую, а не ползущую строку с плавной отрисовкой, установим
<marquee scrolldelay="10" scrollamount="1" truespeed>Бегущая строка</marquee>

Такая строка более приемлема для просмотра.

Статичные варианты бегущей строки.

С помощью изменения параметров атрибутов монтирования и задержки монтирования контента в бегущей строке, она изменяется, то прыгающая, то ползущая, то летящая, добавим к этому перечню ещё несколько вариантов.
Установим в таблицу тэг marquee с такими параметрами, чтобы смещение (шаг) монтирования и длина пробега оказались в одном порядке по количеству пикселей:
<table width="150" border="1" align="center"><tr><td><marquee scrollamount="130" scrolldelay="0">Бегущая строка</marquee></td></tr></table>

Получается не бегущая строка, а мигающий контент или как это принято называть от английского (blink) блинкующий. В Mozill'ах такой эффект задаётся через CSS, в IE он не выполняется. Но в отличии от blink в scrolldelay есть возможность изменять параметр. Установим в него задержку в 5 сек: scrolldelay="5000".

Это уже не банальное мигание, а периодический показ контента :)

Попробуем увеличить объём контента

Но для этого примера необходимо ставить много пробелов между словами, так как ширина букв различна, подогнать достаточно трудно, что бы слова выводились точно по центру:&nbsp; &nbsp; &nbsp;статичная &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; бегущая&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;строчка

Гораздо проще дело обстоит с картинками, ширину картинок сделаем равную 150 пикселей, возьмем, четыре урбанистических пейзажей. Тэг прокручивания поместим в табличную ячейку. Почему в табличную ячейку, да можно всё, тоже самое сделать и в DIV, и это будет более правильно, но не любят Опера и Мозилы, когда marquee помещена в леер, они начинают плевать на указанные размеры такого леера растягивают его, не выполняют параметры тэга, а в таблице терпят и всё выполняют.

<table width="150" height="100" border="0" align="center"><tr><td><marquee scrollamount="150" scrolldelay="4500"><img src="/img/show1.gif" /><img src="/img/show2.gif" /><img src="/img/show3.gif" /><img src="/img/show4.gif" /></marquee></td></tr> </table> Для уменьшения кода, мы опустили альтернативный текст и размеры картинок, на работоспособность это не влияет, но устанавливать их желательно, особенно альтернативный текст.

Явно раздражает пустышка, что бы зрительно создать эффект слайд-шоу вставим в бэкграунд (background) таблицы картинку с изображением средневекового замка (в противоположность суперсовременным городам).

Получится вполне приемлемое слайд шоу.

Там где слайд-шоу, там напрашивается мультипликация, на самую скорою руку нарисуем в Paint три простеньких смайла (наверно мы все начинали освоение графики на компьютере, именно таким образом).

Теперь вставим это в табличку и тэг бегущей строки с таким параметром: scrollamount="63" scrolldelay="1000"

Конечно методом обычной Gif-анимации (не говоря уже о Flash или SVG) создаётся мультипликация гораздо лучшего качества, тем более в них можно устанавливать любую задержку для каждого кадра, в marquee мы можем позволить удвоить (утроить и так далее) время показа картинки установив две картинки (или более) подряд. Установим второй смайлик (с прямым взглядом) дважды.

Несмотря на неудобство с установкой задержки кадров (кстати в некоторых сюжетах если необходимо усложнённый показ можно вставить анимированный кадр) и в мультипликации с помощью marquee тоже есть некоторые преимущества, дело в том, что скроллируется любой тип картинок, правильнее сказать файла любого графического формата воспроизводимого в браузерах, для примера создадим леер (div id="show" в стиле помещённом в голову страницы укажем размеры соответствующие размеры совпадающие с картинками 74х55рх, и в бэкграунде установим цвет зелёный, хотя естественно можно было бы, установить в него картинку: #show {width:74;height:55;background:#3f0}, вставим тэг скроллинга:

Смещение равно ширине картинки 74 пикселя, задержка три секунды (3000 мсек) и на всякий случай скрипты останова скроллирования наведением курсора. А контентом послужат пять картинок самых популярных на веб-страницах графических форматов BMP, PNG, JPG, GIF и GIF-анимация, опытные дизайнеры на глаз определяют (анимированный естественно определяет любой), где какой формат, но мы их подпишем и при желании их свойства можно посмотреть (для более удобного просмотра и установлены скрипты останова, хотя понятно, что они не всегда исполняются)
Всё это в IExplorer должно воспроизводиться, как слайд шоу, а вот в Опере и Мозилах, вероятнее всего получиться обычный скроллинг, даже если бы мы сделали подобный стиль только для Marquee, т.е. без таблицы или леера. Поэтому лучше размещать такую конструкцию в таблице, это не современно, но зато наверняка.

В Marquee скроллируется любой веб-контент не имеющий абсолютной позиции относительно окна браузера или края html-страницы, заданных в скриптах или в расширениях CSS, и воспроизводимых в окне браузера, например Flash, для воспроизведения которой необходим интегрированных с браузером проигрыватель Flash, (у большинства пользователей он обычно установлен, ну и соответственно разрешена его работа, флэш активный элемент выполняемый на стороне клиента, т.е. в целях безопасности Activ X отключены). Итак возьмём для примера с популярнейшего сервера метеоновостей Gismeteo, flash- информеры "Фобос" выполненные размер кнопок 88х31, сообщающие о погоде в городах Витебск, Владимир и Одесса. Эти информеры не только выполнены во Flash Macromedia и сообщают ежесуточно погоду в этих городах, но и находятся на сервере Gismeteo, а гиперссылка установленная внутри флэши, вызывает загрузку страницы с подробным описанием погоды в том городе который указан в информере, естественно снова для удобства добавим скрипты останова скроллинга, ну а в бэкграунд нагло установим кнопку А-СТО в формате PNG: button.png (в бэкграунд можно устанавливать и анимированные картинки).

Если в браузер интегрирован флэш-плеер и разрешено выполнение активных компонентов веб-страницы, то мы можем убедится в мультиплицировании Flash-анимации, хотя звучит это противоестественно (анимация флэш-анимации). Но как обычно оговариваем, что подобные эффекты возможны в IE, а в браузерах других разработок, это будет выглядеть иначе, например в Опере, которая становиться всё более и более популярной, флеши в скроллинге ведут себя иначе чем в IE, и предложенный выше пример с информерами погоды, будет выводиться как последовательный скроллинг.
Итак выражение бегущая строка далеко не всегда соответствует действительности более подходящий термин: автоматический скроллинг или по-русски прокрутка, но надо заметить и это не всегда соответствует тому, что видят наши глаза.

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