Бегущая строка создается тэгом. Веб-дизайн и поисковая оптимизация

<
Часто при написании своего сайта, или его управлением, возникает потребность установить на сайт бегущую строку. Такой элемент дизайна привлекает внимание посетителей на нужные разделы сайта, а также может выделить определенную информацию на передний план, что даст возможность первоочередного просмотра нужной темы.

Используют бегущую строку для различных целей, например, для рекламного сообщения, новостей, акций, объявлений, изображений, смайликов, банеров и т.д.

Создать бегущую строку на сайте – проще простого.

Для создания бегущей строки используют вот этот специальный тег "marquee ", который и поможет вам сделать бегущую строку. Изначально он работал только в браузере Internet Explorer, но теперь почти во всех браузерах.(Не проверяла только в Google Chrome), в остальных работает нормально.

1. СТАНДАРТНАЯ ЗАПИСЬ БЕГУЩЕЙ СТРОКИ такая - :

Бегущий текст

Вставьте заголовок, приветствие, объявление, между этими тегами (ВМЕСТО МОИХ СЛОВ "БЕГУЩИЙ ТЕКСТ"), и вы получите бегущую строку. Будет это выглядеть ВОТ ТАК.

ДЕЛАЕМ БЕГУЩУЮ СТРОКУ

Бегущей строкой может быть не только текст, но и картинка, и ссылка на какой то сайт. Может быть и любой текст, созданный вами на сайтах, создающих красивые надписи. Как например "горящий текст", в предыдущем посте.

Текст можно форматировать так же, как и просто в посте. Например сделаем его большим, жирным, цветным, курсивом и прочее.

А проявив фантазию, или определив цели для использования текстов в своем дневнике, можно придумать довольно невероятные варианты написания бегущих строк для своих постов.

Наиболее распространенные я вам попытаюсь показать.

2. Ширину и высоту бегущей строки можно задать определенными параметрами, то есть поставить ширину строки и ее высоту . Теперь формула будет выглядеть вот такая.

Заданные размеры блока строки

Где width=" " - ширина блока для строки
height=" " - высота блока для строки

Выглядеть это будет вот так.
Задана высота и ширина строки.

3. МЕНЯЕМ ФОН БЕГУЩЕЙ СТРОКИ.
Фон бегущей строчки можно задать любой, какой вам нужен. Вот эта формула. Размеры строки можно не устанавливать. В первой формуле я их поставила, во второй нет.

Меняем фон СТРОКИ

где bgcolor=" " - атрибут устаналивающий параметр цвета фона

Выглядит это вот так

меняем фон СТРОКИ

меняем фон СТРОКИ, без указания ширины и длины

4. ДВИЖЕНИЕ СЛЕВА НАПРАВО.

Поскольку по умолчанию строчка движется, справа на лево, то что бы сделать наоборот, применяем вот эту формулу.

Движение слева направо

Где left - движение справа налево (по умолчанию)
right - движение слева направо

Выглядеть это будет ВОТ ТАК
ДВИЖЕНИЕ СЛЕВА НАПРАВО.

5. ПОСТОЯННОЕ ДВИЖЕНИЕ В ОБЕ СТОРОНЫ.
Можно задать движение строчки постоянно, то есть она будет двигаться попеременно в обе стороны.. Вот эта формула.

где alternate

Выглядеть это будет ВОТ ТАК
ПОСТОЯННОЕ ДВИЖЕНИЕ В ОБЕ СТОРОНЫ

6. ДВИЖЕНИЕ СНИЗУ ВВЕРХ.
Строчка, или изображение могут двигатся не только в разные стороны, но и снизу - вверх. Здесь лучше поставить ограничение строчки,(особенно высоту) или картинки, иначе она будет бегать по всей странице, и займет очень много места. Вот эта формула.

>снизу вверх

Где up - движение снизу верх

Выглядеть это будет ВОТ ТАК

ДВИЖЕНИЕ СТРОЧКИ ИЛИ КАРТИНКИ СНИЗУ ВВЕРХ

7. ДВИЖЕНИЕ СВЕРХУ ВНИЗ.
Можно заставить текст двигаться и наоборот СВЕРХУ ВНИЗ. Вот эта формула.

Сверху вниз

Где down - движение сверху вниз

Выглядеть это будет ВОТ ТАК
ДВИЖЕНИЕ СТРОЧКИ ИЛИ КАРТИНКИ СВЕРХУ ВНИЗ

8. МЕНЯЕМ СКОРОСТЬ ДВИЖЕНИЯ НА БОЛЕЕ МЕДЛЕННУЮ.
Скорость движения строчки тоже можно поменять, сделать быстрее, или медленнее. Для этого используют вот такую формулу.

Меняем скорость на медленную

Где behavior=" " - атрибут устанавливающий тип строчки
alternate - возвратно-поступательное движение
direction=" " - атрибут устанавливающий направление
scrollAmount ="1"

Выглядеть это будет ВОТ ТАК
МЕДЛЕННАЯ СКОРОСТЬ ДВИЖЕНИЯ СТРОЧКИ

9. МЕДЛЕННОЕ ДВИЖЕНИЕ СТРОЧКИ СВЕРХУ ВНИЗ И НАОБОРОТ.
Регулировать скорость строчки вверх и вниз тоже можно. Для этого используют вот такую формулу.

Медленное движение текста снизу вверх и наоборот

Где alternate - возвратно-поступательное движение
direction=" " - атрибут устанавливающий направление(в нашем случае сверху вниз и наоборот)
scrollAmount ="1" - устанавливает скорость движения строки. Цифру скорости можно менять.

Выглядеть это будет ВОТ ТАК
медленное движение текста снизу вверх и наоборот

11. БЕГУЩАЯ СТРОКА С ИЗОБРАЖЕНИЕМ.
Как я уже писала, что двигаться может не только строчка, но и любая картинка. Все выше приведенные формулы так же применимы и к картинкам. Только вместо СЛОВ, вставляется HTML - код картинки. Вот такая формула, к которой можно добавлять любые параметры движения.

Исходная картинка.

Добавим формулу бегущей строки, и выглядеть это будет ВОТ ТАК

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

Пропишу ВСЕ ЭТИ ФОРМУЛЫ ЕЩЕ РАЗ, УЖЕ со всеми параметрами. (то есть к каждой новой формуле добавляется новое значение, и поэтому формула становится все длиннее. Если вам не нужны ВСЕ ПАРАМЕТРЫ, то берите формулы выше, там каждый параметр отдельно)

ПРОСТАЯ СТРОКА- ПО УМОЛЧАНИЮ ЗАДАННЫЕ РАЗМЕРЫ СТРОКИ МЕНЯЕМ ФОН БЕГУЩЕЙ СТРОКИ ДВИЖЕНИЕ СЛЕВА НАПРАВО ПОСТОЯННОЕ ДВИЖЕНИЕ В ОБЕ СТОРОНЫ
СНИЗУ ВВЕРХ СВЕРХУ ВНИЗ МЕДЛЕННАЯ СКОРОСТЬ ДВИЖЕНИЯ СТРОЧКИ МЕДЛЕННОЕ ДВИЖЕНИЕ ТЕКСТА СВЕРХУ ВНИЗ И НАОБОРОТ СТРОКА СО ССЫЛКОЙ НА САЙТССЫЛКА НА САЙТ (НАИМЕНОВАНИЕ)

Любой из этих параметров, вы сможете убрать сами. Например вам не нужен отдельный фон каждой строчки, то вы просто аккуратно сотрите этот параметр.

Или сотрите размеры строчки. Только помните что формула должна быть в угловых КАВЫЧКАХ, поэтому не убирайте их.

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

А все бегут, бегут! И строка бежит. Стоп! Какая строка бежит? Конечно же, бегущая и, конечно же, перед глазами пользователей на чужом сайте. И себе хотите такую? Не беда, сейчас научимся, как сделать бегущую строку самостоятельно.

Кто и куда бежит?

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

Звучит скучно, но выглядит намного веселее.

Бегущая строка для сайта была популярна еще несколько лет назад. Тогда ее использовали в качестве новостной ленты или для отображения рекламных текстов. Главной проблемой такой строки было ее постоянство, которое вскоре надоедало.

Речь о том, что для замены бегущего текста нужно было часто залазить в html код сайта и менять его на новый. Понятно, что сильно часто этого не делали.

Сегодня весь процесс намного упростился. Если говорить о CMS, то для них написано много специализированных плагинов, сильно упрощающих реализацию бегущей строки.

Сейчас большая часть анимации в интернете создана с помощью технологии flash , и ползающий текст в веб-дизайне считается чуть ли не «винтажностью ». Но все равно бегающие перед глазами слова не утратили своей первозданной красоты.

Бегущая строка может быть использована как вывеска для названия сайта или его раздела. Также она идеально подойдет для размещения какой-нибудь умной мысли, которая может стать еще одним способом привлечения внимания со стороны посетителей сайта.

Бегущая строка, написанная на html

Бегущая строка на сайте html – это самый легкий вариант ее реализации с широким диапазоном для творчества.

За движение текста в html отвечает тег . Его синтаксис:

< marquee > текст

У этого тега много значений и атрибутов:

1) direction – устанавливает направление движения текста. Возможные значения атрибута:

• left- в правую сторону;
• right – влево;
• up – вверх;
• down – вниз;

2)behavior – отвечает за тип скроллинга. Принимаемые значения:

• scroll – движение текста в одном направлении;
• slide – одноразовое движение с последующей остановкой (всплывающий текст );
• alternate – в заданном направлении и назад.

3)loop – определяет количество циклов повторений. Возможные значения:

• infinite – бесконечное количество циклов (значение задано по умолчанию ).
• Целое число.

4)scrollamount – задает скорость перемещения бегущей строки. Принимает целое значение.

5)width – задается длина области перемещения.

6)height – задается высота области перемещения.

7)scrolldelay – устанавливает время задержки между циклами в миллисекундах.

Остальные атрибуты тега являются общестилевыми для всех элементов языка гипертекста.

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

И если немного «поиграться » с кодом, то можно заставить двигаться не только текст, но и картинку. А это уже начальный уровень анимации, господа!

Вот код этого примера:

Едрит-Мадрид! Куда меня несет!!!

Бегущая строка для Joomla

Владельцам сайтов на основе CMS приведенный выше пример не подойдет. Точнее, подойдет, но нужно знать, куда можно «влепить » этот пример в html код. А это непросто.

Все CMS построены на основе php , который является серверным языком программирования. Именно на нем написан код, отвечающий за генерацию страниц сайта. То есть каждый элемент страницы сайта («подвал », «шапка ») генерируется во время выполнения кода. Так что редактировать код php своего сайта на CMS не стоит.

Бегущая строка для joomla может быть реализована с помощью установки специальных плагинов. Один из них называется Moving Text . Рассмотрим его установку по шагам:

1. Заходим в панель управления Joomla . Через пункт верхнего меню «Расширения » переходим в «Менеджер расширений ».
2. На вкладке менеджера «Установка » выбираем вариант загрузки и жмем на кнопку «Установить »:

3. Затем переходим в «Менеджер плагинов ».
4. В списке внизу находим нужный плагин. Отмечаем его и нажимаем вверху на кнопку «Изменить ». Рядом с ней находится кнопка «Включить », служащая для активации расширения:

5. В следующем окне в полях «Основные параметры » устанавливаем параметры отображения бегущей строки (длина, скорость и интервал между циклами ). После внесения изменений не забудьте нажать на кнопку «Сохранить » (вверху справа ).
6. Затем через пункт главного меню «Материалы » переходим в «Менеджер материалов ». В нижнем списке отмечаем галочкой нужный материал и жмем на кнопку «Изменить » (кружок с карандашом ).
7. В редакторе жмем на кнопку «html ». На экране откроется окно редактора кода. Туда вставляем { text=Нужный текст }. Вместо «Нужный текст » пишем то, что нам нужно, и жмем на «Обновить »:

После этого в редактируемом материале появится бегущая строка:

Другие варианты реализации бегущей строки

Бегущий текст можно реализовать не только с помощью html и установкой плагинов. Неплохим считается вариант реализации на javascript . Вот пример его действия:

Вот кусок кода, который размещается в теге :

function outmsg(msg,ctrlwidth) { msg = " --- "+msg newmsg = msg while (newmsg.length < ctrlwidth) {newmsg += msg} document.write ("") document.write ("") document.write ("") rollmsg() } function rollmsg() { NowMsg=document.Outmsg.outmsg.value NowMsg=NowMsg.substring(1,NowMsg.length)+NowMsg.substring(0,1) document.Outmsg.outmsg.value = NowMsg bannerid=setTimeout("rollmsg()",100) }

А вот кусок скрипта, который нужно поместить в месте отображения бегущей строки:

outmsg("Вы видите строку! Она бежит! УРА!!!",70)

Также можно реализовать бегающий текст с помощью библиотеки jquery :

Код примера приведен полностью. При желании css , jquery и html можно разнести по отдельным файлам:

$(function() { var marquee = $("#marquee"); marquee.css({"overflow": "hidden", "width": "100%"}); // оболочка для текста в виде span (IE не любит дивы с inline-block) marquee.wrapInner(""); marquee.find("span").css({ "width": "50%", "display": "inline-block", "text-align":"center" }); marquee.append(marquee.find("span").clone()); // тут у нас два span с текстом marquee.wrapInner(""); marquee.find("div").css("width", "200%"); var reset = function() { $(this).css("margin-left", "0%"); $(this).animate({ "margin-left": "-100%" }, 12000, "linear", reset); }; reset.call(marquee.find("div")); }); .string{ width:600px; height:30px; margin:60px auto; line-height:28px; padding: 0 10px; border-radius:4px; box-shadow:0 1px 2px #777; -moz-border-radius:4px; -webkit-border-radius:4px; background: rgb(238,238,238); background: -moz-linear-gradient(top, rgba(238,238,238,1) 0%, rgba(204,204,204,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(204,204,204,1))); background: -webkit-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); background: -o-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); background: -ms-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); background: linear-gradient(to bottom, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#eeeeee", endColorstr="#cccccc",GradientType=0); } Строка с текстом для показа какого-нибудь важного объявления на сайте.

Что в итоге?

Как видно из примеров, из всех реализаций бегущей строки самым «легковесным» является вариант на html . Да и его функционал намного проще для понимания и освоения. Но такая реализация не подойдет для сайтов на CMS . Для них остаются лишь плагины.

Бегущая строка на сайте

При разработке сайта интересным элементом дизайна, привлекающим внимание, может стать бегущая строка . Особенно удобно размещать с её помощью краткие новости, информацию о скидках, распродажах и т.п. Кроме того, бегущая строка - самый простой способ создания анимации на сайте.

Бегущая строка формируется с помощью тега ... (закрывающий тег обязателен). Первоначально тег был предназначен только для браузера Internet Explorer, но современные версии других браузеров также понимают и поддерживают его, хотя он не входит в спецификацию HTML. Из-за этого наличие на странице тега приведет к невалидному коду, то есть ошибке при проверке, но её можно игнорировать. Так же следует учитывать, что браузеры по-разному отображают содержимое бегущей строки , так что при создании сайта обязательно проверяйте её вывод. Как всегда, на первом месте по непредсказуемости обработки HTML-кода стоит Internet Explorer , и тег для него не исключение. Также очень не любит этот тег и Google Chrome.

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

Скидка 50% при заказе КАСКО через интернет. Услуга автомойки бесплатно каждому клиенту

Длину бегущей строки можно ограничить, задав атрибут width (длина строки) или hspace (отступ от границ прокрутки) в пикселях или процентах. К слову о браузерах, в данном примере пришлось перед бегущей строкой ввести неразрывный пробел () и задать style="letter-spacing: 0em" , так как без этой "химии" Internet Explorer 7 (Must die!) некорректно выводил бегущую строку при масштабах показа страницы более 100%.

Если сделать какой-либо элемент бегущей строки ссылкой, то получается интересный трюк "поймай меня!". В нашем примере, чтобы перейти по ссылке, надо успеть кликнуть мышкой по красному автомобилю.

Перемещение бегущей строки можно задавать не только по горизонтали, но и по вертикали. В этом случае, как и в предыдущем, можно указать размеры области, в которой будет происходить движение (атрибуты width и height тега соответственно):

В этом примере для вертикальной бегущей строки отличились уже браузеры Firefox 3.5 и Internet Explorer 7 и 8 . Кроме необходимости вставлять неразрывный пробел () перед началом бегущей строки, но и надпись "каско" выводится в них не по центру, а вот в Opera всё нормально. При желании, вы можете потренироваться в применении "тонких" методов HTML для центровки этой надписи в указанных браузерах.

Для бегущей строки можно устанавливать параметры перемещения элементов, что позволяет с легкостью создавать оригинальные эффекты. Рассмотрим основные атрибуты тега :

• behavior - тип движения элементов бегущей строки:
  - scroll - от края до края в одном направлении (по умолчанию),
  - slide - после выполнения заданного числа проходов строка остаётся у левого или правого края страницы,
  - alternate - направление перемещения меняется на противоположное после выполнения каждого цикла;
• bgcolor - цвет фона бегущей строки;
• direction - направление движения бегущей строки:
  - left - влево (по умолчанию),
  - right - вправо,
  - down - вниз,
  - up - вверх;
• height - высота бегущей строки;
• hspace - отступ от левой и правой границ области прокрутки;
• loop - число показов бегущей строки, по умолчанию - infinite (бесконечное) повторение;
• scrollamount - смещение в пикселях за один шаг;
• scrolldelay - величина задержки в миллисекундах между шагами. Используется для замедления перемещения элементов бегущей строки;
• truespeed - минимальное значение задержки между шагами, по умолчанию 60 мс;
• vspace - отступ по вертикали от границ прокрутки;
• width - ширина бегущей строки.

Текст и элементы, расположенные внутри тегов ..., можно форматировать так же, как любые элементы веб-страницы.

Важное замечание: если длина бегущей строки (текст + картинки) больше ширины страницы сайта, то обязательно указывайте параметр width , чтобы не было искажений верстки в некоторых браузерах!

Если бегущая строка повторяется на нескольких страницах сайта, то её удобно оформить в виде вставки (include), которую можно оперативно менять. Подойдут любые способы включения фрагментов в страницу сайта. Один из самых простых - с помощью JavaScript . На страницу, в том месте, где должна быть бегущая строка, вставляете
,
а сам текст бегущей строки выносите в отдельный файлик stroka.js, который помещаете в ту же папку, что и страницы с бегущей строкой. Ниже приводится вариант такого файла с заданием цвета выводимого текста:

// Java Document
document.write("Текст бегущей строки ");

Проверьте, чтобы кодировка для этого файла была та же, что и у основной страницы. Если вы используете программу Adobe Dreamweaver , то для смены кодировки надо выбрать раздел меню Изменить - Свойства страницы - Название/кодировка . Также сменить кодировку скрипта можно в Microsoft Word . Для этого откройте документ, задайте нужную кодировку, если он выводится неверно (как это сделать, смотрите в "Справке Word"), а затем сохраните его следующим путем: Файл - Сохранить как - Обычный текст - Сохранить . В открывшемся окне вы можете задать необходимую кодировку.

Конечно же, с помощью JavaScript можно создать дополнительные эффекты при выводе бегущей строки. Например, добавив внутрь тега , вы получите остановку бегущей строки при наведении на неё курсора мыши и продолжение её вывода при убирании курсора:

Остановите меня!

Как указано выше, тег приводит к невалидному коду. Если вы хотите избежать этого, то можно воспользоваться другими методами, например, скриптами JavaScript и др. Подробно этот вопрос рассмотрен на сайте a-cto.narod.ru . Там же предложен и интересный вариант бегущей строки - побуквенный вывод текста, который можно задать для любой строки на сайте:

Для создания этого эффекта вставляете в нужное место странцы следующий код:

var line="Побуквенная бегущая строка ";
var speed=150;
var i=0;
function pechatanie() {
if(i++