Непрерывная бегущая строка

Непрерывная бегущая строка

Атрибуты Marquee Ускорение и замедление в Marquee Бегущая строка JavaScript

Создание эффекта непрерывного скроллинга

Декабрь 2006 г.

На форумах посвященных веб-дизайну, новички, довольно часто, задают вопрос о том, как создать непрерывную бегущую строку. Этот вопрос задают те, кто уже знаком с html и тегом marquee. И в ответ более опытные граждане, вспоминают про один из атрибутов тэга marquee, атрибут loop (петли), подразумевая под непрерывностью, постоянную прокрутку контента в течении всего времени показа Веб-страницы. То есть <marquee loop="-1"> или <marquee loop="infinite">, оба варианта равнозначны (установка любого целого числа со занаком минус, в первом варианте), но это так же, аналогично отсутствию этого параметра в теге. Вот этот вариант:

Бегущая в Marquee Бегущая в Marquee Бегущая в Marquee Бегущая в Marquee Бегущая в Marquee Бегущая в Marquee Бегущая в Marquee Бегущая в Marquee Бегущая в Marquee Бегущая в Marquee Бегущая в Marquee Бегущая в Marquee Бегущая в Marquee Бегущая в Marquee >

Собственно loop необходим, только в том случае, если задаётся опраделённое количество прокруток, например пять раз (loop="5") или десять раз (loop="10"), но установим мы бесконечное количество прокруток, и с множество раз повторяющийся контент, но при использовании тэга marquee всё равно получим разрыв (пустышку) в строке. Как например в выше показаном примере, четырнадцать раз записано: Бегущая в Marquee, но после каждой четырнадцатой записи появляется пропуск.



Непрерывно бегущая в GIF

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

Возникновение вопроса имеет под собой основу, ведь реально непрерывная бегущая строка на Веб-страницах существует, и существует достаточно давно. Методов создания эффекта непрерывной бегущей строки, очень много. Мы рассмотрим самые распространенные.

Одним из первых способов который позволил сделать такую строку, был графический формат GIF, появление которого, в своё время, произвело сумашедший фурор, можно сказать именно с него Веб стал медийным. И кстати говоря механизмы GIF и Marquee схожи, если открыть настройки Internet Explorer (Сервис - Свойства обозревателя и в разделе Содержание, снять флажок разрешающий воспроизведение анимации на веб-страницах, тем самым запретив её выполнение, то на странице не будет не только Gif-анимации, но и прекратится выполнение тэга marquee.

kk

Для создания гиф анимированных картинок существует множество программ, самые известные конечно Photoshop и его бесплатный аналог GIMP, впрочем есть и более простые программы в которых можно создать анимацию. Для вышепоказанного примера, автор использовал лёгкое и удобное приложение GIF Movie Gear. На первом этапе создано три фрейма с помощью штатного Paint в Windows, текст в каждом из них смещён. Второй этап: открываем фреймы в GIF Movie Gear и сохраняем в формате анимированный гиф, для наглядности смотрим скриншот:

Скриншот GIF Movie Gear

Готовую анимрованную картинку с бегущей строкой, вставляем в нужное место страницы, т.е указатель пути вызова этой картинки: <img src="/img/beg.gif" alt=">
GIF - замечательный формат, используется для создания любой простой анимации, а не только бегущих строк. Минимальное количество кадров - два. Можно и бегущую строку сделать и из двух фреймов, но она будет слишком "дёрганная", чем больше фреймов (кадров) с минимальным смещением, тем более плавным будет выглядеть движение текста, а скорость задаётся периодом времени показа одного фрейма в миллисекундах. Благо в GIF Movie Gear все настройки интуитивно понятны и просты.



Непрерывно бегущая в JavaScript

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

Для создания бегущей строки вставляем в исходный текст html-страницы, скрипт JavaScript. Найти такой код несложно. Достаточно запросить в любой поисковой системе "скрипт бегущей строки JavaScript" и Вы получите десятки тысяч ссылок на ресурсы предлагающие огромный выбор различных скриптов, в большенстве случаев, бесплатно и без регистрации.
Впрочем Вы можете взять и изучить этот замечательный язык программирования и написать свой собственный скрипт. Вот к примеру замечательный сайт JavaPortal'e на котором можно и учиться, и взять готовые скрипты, наример этот JavaScript, которым собсвтенно и воспользовался автор:

<script type="text/javascript">
<!--
function tekst(msg,ctrlwidth)
{
msg = " "+msg
newmsg = msg
while (newmsg.length < ctrlwidth) {newmsg += msg}
document.write ('<form name="Tekst">')
document.write ('<input name="tekst" style="border:0;font-weight:bold;" value= "'+newmsg+'" size= '+ctrlwidth+' />')
document.write ('</form>')
prokrutka()
}
function prokrutka()
{
NowMsg=document.Tekst.tekst.value
NowMsg=NowMsg.substring(1,NowMsg.length)+NowMsg.substring(0,1)
document.Tekst.tekst.value = NowMsg
bannerid=setTimeout("prokrutka()",56)
}
//-->
</script>
<script type="text/javascript">
tekst("Бегущая в JavaScript",50)
</script>



Непрерывно бегущая в Flash

И ещё одна технология, это конечно Flash в переводе с "ангельского" на великий могучий ВСПЫШКА. Действительно с помощью Flash создаются феерические эффекты и всё больше и больше в сети сайтов выполненых полностью на флэш. Для работы с этим медийным форматом существует огромная масса приложений, как платных так и бесплатных. Делать в них такую вещь, как бегущая строка несколько неприлично, поэтому автор опять воспользовался услугами GIF Movie Gear в которой можно изготовить не только gif, но и flash-анимацию. Процедура изготоления бегущей флеш, та же самая. Разница только в том, что сохраняем файл не в .GIF, а во флеш, т.е. с раширением .SWF. Ну вставляем в исходный код страницы. (для флеш, как Вы видите, предварительно создана папка /flash:

<object type="application/x-shockwave-flash"
data="/flash/beg.swf" width="380" height="20">
<param name="movie" value="/flash/beg.swf" />
</object>


И если в браузер интегрирован флеш проигрыватель, и разрешено выполнение активных элементов веб (обязательное условие для показа flash-контента), то мы увидим ещё одну непрерывно бегущую строку, но теперь уже во FLASH формате. Убедиться в этом можно кликнув провой копкой мыши на примерах с гиф и флеш.

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


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

Апокриф веб-дизайна Невалидность Marquee Текст в Marquee Графика в Marquee Формы в Marquee Скорость Marquee Направление Marquee Поведение Marquee Старт и стоп в бегущей строке

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