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

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

Примечание: Поскольку мой блог на WordPress и большая часть статей относится именно к этой CMS, в конце вы также можете найти видео о том как добавить HTML код в запись на WordPress.

Простая бегущая строка

Демонстрация работы строки находится под HTML кодом. Такой тип бегущей строки вставляется вот таким HTML кодом:

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

Медленная бегущая строка

Демонстрация работы строки находится под HTML кодом. Данный тип можно вывести на экран с помощью кода:

 <marquee scrollamount="1">your running text</marquee>

Обратите внимание, что бы изменить скорость (замедлить строку), вам потребуется вписаться свое значение вместо цифры 1, например 3, или 30.

Здесь находится ваш бегущий текст и он прекрасен

Бегущая строка слева на право

Демонстрация работы строки находится под HTML кодом. Такой тип бегущей строки вставляется вот таким HTML кодом:

 <marquee direction="right">Здесь находится ваш бегущий текст и он прекрасен</marquee>
Здесь находится ваш бегущий текст и он прекрасен

Отскакивающая бегущая строка

Такой тип строки характеризуется тем, что он не заканчивается в конце пути, а отскакивает от края и начинает двигаться в другую сторону. Ниже можно найти код HTML такой строки:

 <marquee behavior="alternate">Здесь находится ваш бегущий текст и он прекрасен</marquee>
your message here

Бегущая строка вверх

В этом случае наша строка будет совершать непрерывный подъем вверх. Вот код:

 <marquee height="50" direction="up">Здесь находится ваш бегущий текст</marquee>
Здесь находится ваш бегущий текст

Бегущая строка вниз

Тоже самое что и предыдущая, только теперь наша строка постоянно двигается вниз. Эти отличия можно наблюдать и в коде: вместо direction=»up», мы теперь пишем direction=»down». Вот такой у нас получается HTML:

 <marquee height="50" direction="down">your running text</marquee>
Здесь находится ваш бегущий текст

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

Здесь у нас должен добавиться фон у строки. Давайте посмотрим код и действие:

 <marquee bgcolor="silver">Здесь находится ваш бегущий текст</marquee>
Здесь находится ваш бегущий текст

Бегущая строка с ховером

Попробуйте навести на работающую строку ниже курсор мыши — она остановится. Вот код:

<marquee onmouseover=this.stop() onmouseout=this.start() >Поймай меня мышкой</marquee>
Поймай меня мышкой

Необычный вариант

Как очень нетривиальную опцию предлагаю еще такую строку:

<marquee bgcolor="pink" width="25%">Здесь находится ваш бегущий текст</marquee><marquee bgcolor="aqua" width="25%" direction="right">Здесь находится ваш бегущий текст</marquee><marquee bgcolor="silver" width="25%">Здесь находится ваш бегущий текст</marquee><marquee bgcolor="aqua" width="25%" direction="right">Здесь находится ваш бегущий текст</marquee>

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

Здесь находится ваш бегущий текстЗдесь находится ваш бегущий текстЗдесь находится ваш бегущий текстЗдесь находится ваш бегущий текст

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

Уже не совсем бегущая строка — скорее бегущая картинка. Но вписывается в тему этого тутаториала однозначно, поэтому вот код HTML для вывода такого необычного решения на вашем сайте:

 <marquee><img src="Здесь нужно вставить адрес картинки в сети/ на сайте"></marquee>

Как добавить HTML на WordPress

 

Примечание

Небольшое примечание: Тег marquee, задающий бегущую строку, придуман когда-то для Internet Exlorer и другие веб-браузеры не всегда корректно отображают работу различных его атрибутов. Желательно проверить работоспособность из Google Chrome и Safari.