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

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

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

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

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

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>


 Дом

 Дом

 Дом

 Дом

 Дом

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

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


knopkisoc

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

  1. Зинаида

    Спасибо. Очень понравилась бегущая строка, особенно изображений. Надо применить.

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *