Графика в Marquee. Скроллирование графики в тэге

Графика в Marquee

Атрибуты Marquee Текст в Marquee Формы в 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.



Совмещение графики и текста.

Достаточно актуально, совмещение текста и графики, рассмотрим пример такого совмещения;
<marquee>Российский <img src="/img/flag.gif" alt="Триколор" /> триколор</marquee>
Российский Триколор триколор.

По умолчанию положение картинки принимается, как align="baseline" базовой линии с текстом. Если необходимо иное размещение, то в атрибут align устанавливается соответсвующий параметр. Например размещение про середине текста, выполняется параметром absmiddle (middle-середина: англ.)
<marquee>Российский <img src="/img/flag.gif" alt="Триколор" align="middle" /> триколор</marquee>
Российский Триколор триколор.

Установить текст и картинку по верхней линии позволяет align="top"
Российский Триколор триколор.
Если требуется более широкое изменение располжение текста и графики по вертикали, применяется атрибут vspace, параметр вертикального спейсинга определён в пикселях, по умолчанию его значение равно нулю.
<marquee>Российский <img src="/img/flag.gif" alt="Триколор" vspace="30" /> триколор</marquee>
Российский Триколор триколор.
Картинка перемещена на 30 пикселей вверх относительно базовой линии.
Spacing по горизонтали возможен не только с помощью пробела, как в примере Дом-1 и Дом-2, но и атрибутом hspace, независимо устанавливается пространство между картинками или между картинками и текстом. Расстояние в hspace, как и в вертикальном спейсинге задаётся в пикселях и по умолчанию равно нулю.
<marquee>Российский <img src="/img/flag.gif" alt="Триколор" hspace="40" /> триколор</marquee>
Российский Триколор триколор.



GIF-анимация в бегущей строке

Сочетание gif-анимации и marquee позволяют строить сюжеты, конечно не превосходящие Flash (это не возможно, Флеш-анимация сложнейшая технолонигия), но как минимум, конкурирующие в изобразительном плане, ведь скроллировать можно любой гафический файл. А по весу всегда выигрыш. Создадим ещё одну картинку с аэропланом, но теперь сделаем её анимированной (оживлённой). Для анимации gif можно использовать достаточно много программ, самые известные платный PhotoShop или бесплатный GIMP, правда они тяжеловаты и требуют время на освоение, но есть программы попроще, для создания примеров автор использовал GIF Movie Gear. Простая, лёгкая в освоении, позволяет создавать полноценную анимацию, конвертировать самые популярные графические форматы, создавать прозрачные пиксели, есть ещё несколько удобных фишек. Правда программа платная, но своих денег она стоит. Другой путь взять готовые анимированные картинки, в Интернете предостаточно всевозможной графики, бесплатно и в огромном количестве, надо только подобрать подходящую для совмещения с бегущей строкой. Но мы рассмотрим только возможность установки gif-анимированной картинку в marquee. Итак с помощью GIF Movie Gear cоздадим картинку aeroplan_3 в четыре кадра (фрейма) смещение объекта вверх-вниз (рысканье).

Аэроплан-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-Документа.


в начало статьи

Направление Marquee Скорость Marquee Направление Marquee Поведение Marquee Старт и стоп в бегущей строке Ускорение и замедление в Marquee

eXTReMe Tracker Карта сайта