Бегущая строка, для сайта.

Большинство веб мастеров пишут в своих блогах и статьях на сайтах, что бегущая строка неактуальна, типа, это отстой.  Но это далеко не так, и лично я не могу, сними согласиться. Буквально несколько месяцев назад я продавал один из своих сайтов на бирже. Десятидневный срок подходил к концу, а ставки были минимальные, по крайне мере некто не давал ту цену, которую хотел я. Тогда и пришло решение, что то поменять. И скажу вам честно кроме хорошо оформленной бегущей строки, я нечего больше не добавил. Не буду говорить, что и как я сделал, во всех подробностях, скажу лишь одно, я продал сайт в этот же день. Даже было желание поднять цену лота, но помешала совесть.  

Тег <marquee>.

Кто же заставляет двигаться наш текст? На самом деле всё очень просто, достаточно вставить необходимую строку между парным тегом <marquee></marquee> и движение началось.

<marquee>
Здесь текст вашей бегущей строки.
</marquee>

Текст, который можно завернуть в ссылку, начнет своё движение справа, налево из одного конца страницы в другой.  Но, к сожалению, скорость движения очень быстрая и мерцание текста рябит в глазах. Тут нам поможет атрибут  «scrollamount», он и отвечает за скорость, здесь как на авто, чем выше передача, тем быстрее, поставим  ему значение «3». Сразу уменьшим ему мерцание с помощью атрибута «scrolldelay», он производит задержку в миллисекундах, но тут всё наоборот, чем ниже его значение, тем выше скорость. Выставим ему значение «100». В общем, должен получиться вот такой открывающий тег:

<marquee scrollamount="3" scrolldelay="100">

В данной статье мы не будем рассматривать, как сделать рамку или блок, поскольку это уже другие знания и возможности. Мы рассмотрим лишь основные варианты, которые могут находиться в теге <marquee>.

При необходимости ширина и высота, задаётся как в обычных таблицах HTML, то есть вот так:

<marquee scrollamount="3" scrolldelay="100" width="600" height="20" >

Если хоти  добавить цвет фона тут, также используем атрибут из HTML  bgcolor="код_цвета". Следующий момент,  можно сделать чтобы при наведении курсором на текст, он не убегал от пользователя а останавливался. Для этого используем следующую атрибутику:

onmouseover="this.stop()"- останавливает текст,  при наведении курсором.

onmouseout="this.start()" –запускает текст, после остановки.

Ещё два атрибута, которые могут понадобиться нам, при создании простой бегущей строки, это:

vspace="50" делает отступ сверху, в данном случае 50px.

hspace="30" делает отступ от левого края, в данном случае 30px.

В общем, после всех этих процедур, наш обычный код бегущей строки приобрёл следующий вид:

<marquee scrollamount="3" scrolldelay="100" width="600" height="20" bgcolor="#FFFAD0"
onmouseover="this.stop()" onmouseout="this.start()" hspace="30" vspace="50">
Здесь текст вашей бегущей строки.
</marquee>

Теперь давайте рассмотрим варианты, движения текста в другие стороны.

behavior="alternate" – текст движется, туда и обратно (текст показывается полностью,  не зависимо от его длинны, после последнего знака начинается движение в обратную сторону).

direction="right"  – делает  движение текста слева, направо.

direction="down" – задаёт движение сверху вниз.

direction="up" – задаёт движение снизу вверх.

В последних двух вариантах, не забудьте, задать необходимую ширину и высоту, а также по возможности разбить длинные строки на абзацы, при помощи тега <p> или разделить строки <br>.

Все примеры и коды можете просмотреть, нажав кнопку ниже «Смотреть Демо>>».

Смотреть Демо >>