Статьи о Marquee
Скроллирование графики в тэге marquee
Декабрь 2008 г.
Для автоматического скроллирования в html разметке, используется тэг <marquee>, tag-этикетка (англ.-рус. словарь). Этот эффект принято называть бегущая строка, но если заглянуть в англо-русский словарь среднего объёма, то слово marquee можно перевести, как театральный занавес. Программисты создавшие этот тэг, заложили в него возможность скроллирования не только текста, но и других элементов html-документов. Иначе они предложили иное название этого контейнера.
Убедиться в том, что marquee, театральный занавес, а не бегущая строка, поможет установка различных форм используемых на веб-страницах, в контейнер <marquee></marquee> (скроллирование некоторых элементов, лишено всякого практического смысла, рассматривать можно только, в качестве примера, но есть формы, анимация которых вполне пригодна для создания оригинальных эффектов).
Самыми подходящими для скроллирования и подтверждения театральности этого тэга, являются картинки (рисунки, фотографии, gif-анимация), любого веб-формата: BMP, GIF, PNG, JEPG, TIFF. Установим в тэг картинку:
<marquee><img src="/img/domik.gif" /></marquee>
где img непарный тэг вывода графического файла, путь к которому указан в источнике src, картинка в формате gif находится в папке /img с именем domik, тэг закрыт /> в xhtml, в html закрывается >, хотя /img непарный тэг, допускается вариант закрытия как парного <img src=""></img>, этот вариант валиден и для html и для xhtml. Обязательным требованием в <img> является установка альтернативного текста атрибутом <img alt="<!--альтернативный текст картинки-->">, информирующий пользователя о содержании картинки, если в его браузере не воспроизводится графический файл. Во многих руководствах по веб-вёрстке, рекомендуется устанавливать атрибуты height= и width= высота и ширина картинки в пикселях, для ускорения загрузки графики. Используется атрибут border= рамка (бордюр), указывается толщина в пикселях, чаще всего устанавливается значение 0 (ноль). Высота и ширина картинки в html-генерирующих приложениях выводится в значении оригинала т.е. так как если бы они не были бы установлены, но изменением их, можно видоизменить картинку, сжать или растянуть. Посмотрим действие этих параметров: <marquee><img src="/img/domik.gif" alt="Домик" height="50" width="220" border="3" /></marquee>
Картинка изменилась (исходные размеры 154х78 width="154" height="78"). В CSS, рекомендуется устанавливать параметры картинки через атрибут стиля:
<img src="" alt="" style="border:0; width:154; height:78" />
Несмотря на то, что скроллировать можно картинку любого веб-формата, предпочтительнее всего GIF (Graphic Interchange Format), во-первых это самый лёгкий по весу формат, во-вторых в нём выполняется анимация (мультипликация), и в третьих он позволяет использовать прозрачные пиксели.
Используем картинку с изображением, аэроплана объекта более подходящего для скроллирования, (дом по юридическому определению недвижимость), перед установкой в тэг, сделаем фон прозрачным.
 |  |
| aeroplan_1.gif Непрозрачный фон | aeroplan_2.gif Прозрачный фон |
Теперь вставим картинку с прозрачным фоном в тэг бегущей строки, но не забудем поставить border="0", чтобы не получился вариант догоняющего аэроплана.
Для более эффектного полёта, сделаем фон, возьмём и вырежем кусочек неба из самых известных обоев для рабочего стола, обои по умолчанию, для рабочего стола Windows XP, установленного по умолчанию, (в русском переводе Безмятежность), вообще лучше этого не делать, а то из-за пары облачков, можно поиметь проблемы с нарушением прав интеллектуальной собственности (копирайта).
Создадим Layer с названием <div id="aeroplan"> со стилем #aeroplan { width:720px; height:100px; background-image: url(/img/nebo.gif)}, где background-image: url(/img/nebo.gif) будет указание на сделанный кусочек неба, (допустимо записать чуть короче background: url(/img/nebo.gif)). <div id="aeroplan"> <marquee> <img src="/img/aeroplan_2.gif" alt="Аэроплан" border="0" width="157" height="93"></marquee></div>
Вместо лежака(Layer), бегущую строку с картинкой вполне можно поместить и в таблицу, но картинка в бэкграунде табличной ячейки, не валидная разметка, хотя результат будет выглядеть одинаково:
Проблемой может стать установка в бэкграунд поля картинки фона, причины, это или настройки браузера отличные от дефолтных, или версия браузера в которой фоны выставляются автоматически, если они не найдены им в разметке. Этот вариант продемонстрируется, заменой в рассматриваемом коде aeroplan_2.gif (картинка с прозрачным фоном), на aeroplan_1.gif (картинка с белым непрозрачным фоном).
Но в самых популярных IE и Firefox, такой проблемы нет. И если не заморачиваться валидностью кода, но стремясь облегчить выгрузку страницы, такой способ анимации даёт экономию, если бы создать Gif-анимированную картинку с летящим аэропланом такого размера, максимально оптимизированная, весила бы приблизительно 60 Кб, Flash Macromedia и того больше, да и другие методы анимации не легче. Бегущая строка самая ограниченная в графических возможностях, но и самая легкая, сюжет с аэропланом рассмотренный выше около 30 Кб, т.е. в два раза легче Gif.
GIF-анимация в бегущей строке
Сочетание gif-анимации и marquee позволяют строить сюжеты, конечно не превосходящие Flash (это не возможно, Флеш-анимация сложнейшая технология), но как минимум, конкурирующие в изобразительном плане, ведь скроллировать можно любой графический файл. А по весу всегда выигрыш. Создадим ещё одну картинку с аэропланом, но теперь сделаем её анимированной (оживлённой). Для анимации gif можно использовать достаточно много программ, самые известные платный PhotoShop или бесплатный GIMP, правда они тяжеловаты и требуют время на освоение, но есть программы попроще, для создания примеров автор использовал GIF Movie Gear. Простая, лёгкая в освоении, позволяет создавать полноценную анимацию, конвертировать самые популярные графические форматы, создавать прозрачные пиксели, есть ещё несколько удобных фишек. Правда программа платная, но своих денег она стоит. Другой путь взять готовые анимированные картинки, в Интернете предостаточно всевозможной графики, бесплатно и в огромном количестве, надо только подобрать подходящую для совмещения с бегущей строкой. Но мы рассмотрим только возможность установки gif-анимированной картинку в marquee. Итак с помощью GIF Movie Gear cсоздадим картинку aeroplan_3 в четыре кадра (фрейма) смещение объекта вверх-вниз (рысканье).
Вставим в уже готовый леер aeroplan в котором изменён только файл /img/aeroplan_3.gif.
Конечно более интересно выглядит сюжет с качественной анимацией. Для примера автор взял картинку с летящей уткой, впрочем может это и не утка, а селезень, или вообще гусь (не будем влезать в орнитологию, науку о птицах). Взятый чужой графический файл в формате GIF-animation, при наличии упомянутого выше редактора GIF Movie Gear можно отредактировать по своим потребностям, например заменить фон или сделать его прозрачным, подкорректировать цвета картинки, оптимизировать, что-бы файл весил поменьше, удалить или добавить кадры (фреймы), изменить размеры фреймов, сместить позиции тех же фреймов, установить время задержки показа кадров, развернуть кадры на 180° или 90° и т. д.
С данной уткой или гусём (левый рисунок - исходная картинка), построенной из четырёх кадров с прозрачным фоном, автор позволил себе (рисунок справа: картинка изменена в Gif Movie Gear): изменить центровку фреймов (исходная уточка показалась ему слишком дёрганной, возможно это было более правильно, но автор не орнитолог), увеличить задержку третьего кадра (с20 мсек до 25 мсек), остальные остались с исходной задержкой 20 мсек, сделать оптимизацию, файл весил 6,5 Кб, а подрезанный стал весить 5 Кб, ну и собственно поместил всю эту красоту в тэг <MARQUEE scrollamount="12">, т.е. отрисовка картинок со смещением 10 пикселей относительно предыдущей. Будем надеяться, что художник сделавший эту замечательную уточку, не очень обидится, на автора, позволившего себе некоторые вольности с прекрасной птицей (небрежно крылышки подрезал... а это, что б не улетела далеко.). И автор честно признаёт, что он не орнитолог, не программист, не веб-дизайнер, и не художник. Поэтому не будет помещать утку, на небо корпорации Microsoft, как это сделал с аэропланом из коллекции MS Office, и который тоже подредактировал в GIF Movie Gear.
Ну а уточка пусть летит:
Достаточно часто анимированные картинки вставляются в возвратно-поступательную бегущую строку, т.е. используется атрибут поведения behavior="alternate", (по умолчанию он задаётся, как scroll). В такой скроллинг, обычно вставляют картинки с забавными персонажами: зверьки, солдатики, которые движутся туда-сюда. Для демонстрации используем всё тот же аэроплан, но с двумя кадрами развёрнутыми на 180° с периодом в 580 мсек. Основным моментом является период, между кадрами, самое главное, что-бы этот период совпадал с временем прокрутки контента в одну сторону. Вставим в тэг с такими атрибутами:<marquee behavior="alternate" scrollamount="10" scrolldelay="100">
где behavior="alternate" атрибут возвратно-поступательного скроллинга, scrollamount="10" смещение монтирования контента, scrolldelay="100" задержка отрисовки в миллисекундах.
Но надо учитывать, что загрузка marquee происходит быстрее чем выгрузка графики, поэтому сюжет может выглядеть нелепо (аэроплан летит хвостом назад, хотя для кого-то это покажется забавным). При создании такого сюжета, должно быть минимум графики в документе или необходимо создать задержку загрузки бегущей строки, что бы анимация картинки и бегущей строки были синхронизированы. Впрочем для этой страницы, исправить неправильный полёт, можно попробовать обновить страницу браузером, но вероятность, что это поможет, не велика.
Скроллинг текста в графике
Итак убедившись в возможности скроллирования анимированных картинок, вернёмся к понятию бегущая строка, потому, что театральный занавес уже никогда не приживётся в отношении к Marquee
Дело в том, что при наличии богатого инструментария по модификации веб-шрифтов в HTML с помощью Каскадной таблицы стилей (CSS), веб-шрифтов всего один десяток, а шрифтов существует десятки тысяч. И всегда есть желание установить в html-документы шрифты отличные от стандартных в том числе и в бегущую строку. Несмотря на то, что в CSS существует возможность импорта шрифтов, гораздо проще вставить картинку с изображением текста, выполненного любым шрифтом и как угодно изменённом. Для примера используем шрифт из набора MS Office, с тенью и с прозрачным фоном.
Или, вспомнить, что Пушкин наше всё, установить в бегущую строку, бессмертные слова Александра Сергеевича, его незабвенным почерком, великого гения.
Собственно помещение графики в бегущую строку, не имеет особых параметров, не имеет значение и каким методом графика внедряется в страницу, так как главное, что из себя представляет изображенный объект. Двигать домик (дом), просто не логично, а вот самолёт или автомобиль, вполне уместно. Можно сделать театральный занавес, или бегущую строку, а то и поконкурировать с Flash (кстати некоторые навыки при создании динамических сюжетов, с помощью maquee и gif, вполне могут пригодиться при освоении Flash-анимации). Основной момент при установки графики, это сопровождение, рисунка альтернативным текстом, на случай просмотра страницы, браузером, в котором отключена возможность выгрузки картинок. Особенно, если контент четко связан с темой HTML-Документа.
