Коды разных бегущих строк на HTML + добавление на WordPress

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

Если вам понравится материал из этой статьи, обязательно посетите раздел этого сайта про работу с 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>

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

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

 <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.