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

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

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

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

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

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="http://mnogoblog.ru" title="Поймай меня!"> Создай бегущую строку сам с помощью сайта mnogoblog.ru </a>
</marquee>


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

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

<marquee>
<img  src="http://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>


 Дом

 Дом

 Дом

 Дом

 Дом

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

Введите свой email адрес для того, чтобы подписаться на мой блог:


knopkisoc

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

Добавить комментарий