Как сделать бегущую строку в 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

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

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

---

Рубрики: Ликбез | Полезное на сайт Тэги: html/css | вордпресс | полезное