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

Скачать исходники для статьи можно ниже

Начнем с плагинов:

Плагины бегущей строки для сайта.

Horizontal scrolling announcement

Информация о плагине на основе сайта “wordpress.org”:

Последнее обновление плагина: 2013-5-18

Загрузок: 42,743

Автор:  Gopi.R

Установка плагина Horizontal scrolling announcement стандартная – заходим в панель управления wordpress, в левом меню выбираем пункт “Плагины” и его подпункт “Добавить новый”, в строку поиска вводим “Horizontal scrolling announcement”, устанавливаем и активируем плагин.

После активации в пункте “Параметры” (Настройки) у вас появится новый подпункт Horizontal scrolling – заходим в него:

У плагина есть 4 подпункта:

– Content Managment – здесь создается бегущая строка: текст строки, ссылки на строки, показывать или нет строку, а также порядок строк в бегущей строке.

– Setting Page – страница настройки бегущей строки.

– Plugin Live Demo – ссылка на сайт плагина.

– Official Help – ссылка на сайт плагина.

Если мы зайдем в подпункт  Setting Page, то увидим следующее:

Здесь можно отрегулировать скорость бегущей строки, задержку показа бегущей строки, направление показа, отредактировать стиль бегущей строки (цвет, шрифт).

Вставить бегущую строку плагина Horizontal scrolling announcement можно с помощью:

1. виджета (который появиться после активации плагина),

2. шорткода (для вставки бегущей строки в записи или странички),

[horizontal-scrolling]

3. с помощью кода (для вставки бегущей строки непосредственно в шаблон темы).

<?php announcement(); ?>

Скрипты и теги.

Теперь перейдем к скриптам и тегам для создания бегущей строки на сайте.

Тег <marquee>

Тег <marquee> создает бегущую строку на странице. На самом деле содержимое контейнера <marquee> не ограничивается строками и позволяет перемещать (скролировать) любые элементы веб-страницы — изображения, текст, таблицы, элементы форм и т.д. Перемещение можно задать не только по горизонтали, но и вертикали, в этом случае указываются размеры области, в которой будет происходить движение.

Синтаксис тега <marquee>:
<marquee>…</marquee>

Атрибуты тега <marquee>:

• behavior – тип движения элементов бегущей строки:
  – scroll – от края до края в одном направлении (по умолчанию),
  – slide – после выполнения заданного числа проходов строка остаётся у левого или правого края страницы,
  – alternate – направление перемещения меняется на противоположное после выполнения каждого цикла;
• bgcolor – цвет фона бегущей строки;
• direction – направление движения бегущей строки:
  – left – влево (по умолчанию),
  – right – вправо,
  – down – вниз,
  – up – вверх;
• height – высота бегущей строки;
• hspace – отступ от левой и правой границ области прокрутки;
• loop – число показов бегущей строки, по умолчанию – infinite (бесконечное) повторение;
• scrollamount – смещение в пикселях за один шаг;
• scrolldelay – величина задержки в миллисекундах между шагами. Используется для замедления перемещения элементов бегущей строки;
• truespeed – минимальное значение задержки между шагами, по умолчанию 60 мс;
• vspace – отступ по вертикали от границ прокрутки;
• width – ширина бегущей строки.

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

<marquee   class="scroolingtext" >
Бегущая строка на сайте от mnogoblog.ru!     
</marquee>

А в файл стилей (в wordpress это файл style.css) пропишем, например, следующее (изменен цвет, размер, установлен жирный шрифт и указанно расстояние между букв):

.scroolingtext {
color: #F03;
font-size: 18px;
font-weight: bold;
letter-spacing: 0em;
}

Примеры использования тега <marquee>:

1. Бегущая строка с параметрами по умолчанию:

<marquee>Бегущая строка с параметрами по умолчанию</marquee>

Бегущая строка с параметрами по умолчанию

2. Бегущая строка с ссылкой в тексте:

<marquee>
<a href="https://mnogoblog.ru" title="Поймай меня!"> Создай бегущую строку сам с помощью сайта mnogoblog.ru </a>
</marquee>

Создай бегущую строку сам с помощью сайта mnogoblog.ru

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

<marquee>
<img  src="https://mnogoblog.ru/wp-content/uploads/2013/07/stroka.png" alt="Поймай меня!" width="82" height="22" border="0" title="Поймай меня!" /> Создай бегущую строку сам с помощью сайта mnogoblog.ru
</marquee>

Создай бегущую строку сам с помощью сайта mnogoblog.ru

4. Бегущая строка с параметрами не по умолчанию:

<marquee behavior="alternate" direction="left" bgcolor="#ffcc00">
Создай бегущую строку сам с помощью сайта mnogoblog.ru
</marquee>

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

Создай бегущую строку сам с помощью сайта mnogoblog.ru

Аналогично используются и все остальные атрибуты бегущей строки.

4. С изображениями, которые прокручиваются вертикально:

<marquee  direction="up" width="230" height="200" scrollamount="2" scrolldelay="40" >
            &nbsp;<img src="/wp-content/uploads/2013/07/1.jpg" alt="Дом" width="100" height="75" border="0" /><br />
            <br />
            &nbsp;<img src="/wp-content/uploads/2013/07/2.jpg" alt="Дом" width="100" height="75" border="0" /><br />
            <br />
            &nbsp;<img src="/wp-content/uploads/2013/07/3.png" alt="Дом" width="100" height="75" border="0" /><br />
            <br />
            &nbsp;<img src="/wp-content/uploads/2013/07/1.jpg" alt="Дом" width="100" height="75" border="0" /><br />
            <br />
            &nbsp;<img src="/wp-content/uploads/2013/07/2.jpg" alt="Дом" width="100" height="75" border="0" />
            </marquee>

Продолжение следует…