Влево, вправо, вверх, вниз или бегущая строка на сайте

Приветствую читателей блога!

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

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

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

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

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

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

Поэтому, после установки на сайт бегущей строки, проверяйте ее отображение хотя бы в наиболее популярных браузерах.

Добавляем бегущую строку на свой сайт

Для того чтобы установить бегущую строку нужно ввести вот такой код:

1

 <marquee>Ваш текст</marquee>

Вот что из этого получается

БЕГУЩАЯ СТРОКА

Следующий код

1

 <marquee scrollamount="1">НЕ СТОЙ ПОД СТРЕЛОЙ</marquee>

НЕ СТОЙ ПОД СТРЕЛОЙ
Следующий код

1

 <marquee scrollamount="3">ПРИВЕТ МИР!</marquee>

ПРИВЕТ МИР!

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

1

 <marquee direction="right">УДАЧИ ВСЕМ!</marquee>

УДАЧИ ВСЕМ!

1

 <marquee behavior="alternate">ТУДА, СЮДА, ОБРАТНО</marquee>

ТУДА, СЮДА, ОБРАТНО

1

 <marquee height="100" direction="up">ВСЕ ВЫШЕ И ВЫШЕ И ВЫШЕ</marquee>

ВСЕ ВЫШЕ И ВЫШЕ И ВЫШЕ

1

 <marquee height="100" direction="down">В НОГАХ ПРАВДЫ НЕТ</marquee>

В НОГАХ ПРАВДЫ НЕТ

Можно сделать не только бегущую строку, но и картинку.

1

 <marquee><img src="АДРЕС КАРТИНКИ В СЕТИ"/></marquee>

А можно картинку сделать ссылкой, об этом я писал в данной статье.

Я сделал так, что картинка перемещается от одного края к другому, при наведении курсора она замирает, а еще она является ссылкой на главную страницу блога.
Вот код последней картинки

1
2

 <marquee behavior="alternate"onmouseover=this.stop() onmouseout=this.start()><a href="http://egofilin.ru/" target="_blank">
<img src="http://egofilin.ru/wp-content/uploads/2014/06/dengi.png"/></a></marquee>

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

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

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

Успехов вам!