Как сделать бегущую строку в html

Как сделать бегущую строку в html? Очень просто. Делается это с помощью тега html < marquee >  Этот тег имеет ряд атрибутов. Мы рассмотрим их на примерах ниже и узнаем как вывести последние новости из определенных категорий бегущей строкой в wordpress.

Тег <marquee> дает возможность перемещать не только текст, но и другие элементы, например картинки или блоки.

А сейчас примеры бегущей строки.

Пример как сделать бегущую строку в html слева направо:

<marquee direction= "right">Бегущая строка в html cлева направо</marquee>

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

Что бы текст не уходил за кромку поля, а двигался туда и обратно добавляем атрибут behavior со значением alternate

<marquee behavior= "alternate" >Бегущая строка перемещается между правым и левым полем</marquee>

Бегущая строка перемещается между правым и левым полем

Останавливаем бегущую строку наведением курсора

<marquee onmouseout= "this.start()" onmouseover="this.stop()" ><b>Бегущая строка останавливается при наведении</b></marquee>

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

Делаем нашу строку цветной и более привлекательной путем добавления стилей css:

<marquee style= "color:#470dd9; font-size: 20px; font-weight: bolder; line-height: 150%; text-shadow: #000 0px 1px 1px;" >Цветная бегущая строка с тенью </marquee>

Цветная бегущая строка с тенью

Как сделать бегущую строку html на цветном фоне:

<marquee bgcolor= "#e20b0b" >Бегущая строка на цветном фоне</marquee>

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

Бегущая строка в html движется снизу вверх. Высоту блока указываем атрибутом heigh:

<marquee 
 direction= "up"  height= "120" style= "color:#0F8D68; font-size: 24px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;" >Бегущая строка снизу вверх</marquee>

height= "120"- высота блока
color:#0F8D68- цвет текста
font-size: 24px- размер шрифта
Бегущая строка снизу вверх

Атрибутом scrolldelay регулируем скорость прокрутки:

<marquee scrolldelay= "50" style= "color:#0F9D58; font-size: 24px; font-weight: bolder; line-height: 110%; text-shadow: #000000 0px 1px 1px;" >Как сделать бегущую строку в html</marquee>

Как сделать бегущую строку в html

Оформляем блок в  рамку, добавим высоту, ширину, атрибуты width и height и цвет фона атрибут bgcolor

<marquee bgcolor= "#e2000b"  direction= "down" height= "130" width= "300" scrollamount= "3" style= "border: 2px solid #000000; text-align: center; color: #f2132d; font-size: 30px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;" >Бегущая строка в рамке на цветном фоне</marquee>

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

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

<marquee><img src= "URL изображения" 
 /></marquee>

Вставляем ссылку в бегущую строку

<marquee onmouseout= "this.start()" onmouseover= "this.stop()" > Текст перед ссылкой <a href= "url адрес ссылки" >текст ссылки</a></marquee>

Может вам будет интересно посмотреть Лучший интерактивный учебник HTML для начинающих

Вывод новых записей в бегущую строку

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

<div id="newpost">
<h2>Пример бегущей строки</h2>
</br>
<hr>
<marquee direction = "left" onmouseover = "this.stop()" onmouseout = "this.start()" >
<?php $CountPost = 5; $CategoryID = '1,18'; ?>
<?php $cnt = 0; $my_query = new WP_Query("cat= ".$CategoryID." &showposts= ".$CountPost);
while ($my_query->have_posts()) : $my_query->the_post(); ?>
<span class = "runpost" ><a href = "<?php the_permalink() ?>" ><?php the_title(); ?></a> * * * </span>
<?php endwhile; ?>
</marquee>
<hr>
</div>

$CountPost = 5 - количество выводимых записей (поставьте сколько нужно)

$CategoryID = '1,18' - id категорий из каких выводим последние записи (ставим через запятую)

Далее вставляем код в необходимое место страницы через редактор файлов. В боковой панели: Внешний вид > Редактор > Файл. Что бы бегущая строка была в хедере сайта прописываем код в header.php, для вывода строки в подвале - файл footer.php

Работу кода можно посмотреть здесь: Демо вывода последних новостей бегущей строкой

Примерно так. Надеюсь что статья будет для Вас полезной. Успехов!