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

Статья читается: 1 мин.

Приветствую всех посетителей!

Очень давно искал плагин бегущей строки для сайта, но так нормального и не нашел, но вот недавно наткнулся на зарубежном сайте на классную бегущую строку. Посмотрел как она реализована и нашел jQuery плагин для такой строки. Он называется Web ticker. Настройка заняла буквально 5 минут и в итоге у меня получилось вот так:

И сегодня я вам расскажу как установить себе на сайт бегущую строку с помощь небольшого плагина Web ticker.

Web ticker — что это такое?

Web ticker — это jQuery плагин, который позволяет прокручивать на вашем сайте например заголовки ваших статей. Он использует некоторые необычные расчеты для обеспечения плавного непрерывного движения. Контент, помещенный в web ticker может быть разнообразным, включая текст, список картинок или ровные стилизованные списки. Web ticker API также может быть использован для управления прокруткой и настраивается программно.

Инсталляция и конфигурация

Все, что вам нужно сделать, это посмотреть на несколько наших простых примеров, чтобы начать работу. Читать далее пошаговые инструкции.

1. Убедитесь, что сам jQuery подключен к вашему сайту и если он еще не подключен, то вы можете вставить его сами, скопировав код ниже:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

2. Вам нужно скачать файл web ticker. Тут лежит его минимализированная версия. Или установить через npm (менеджер пакетов, входящий в состав Node.js.)

npm install webticker

И включить его на странице

<script src="./path/to/jquery.webticker.min.js"></script>

3. Теперь нужно сделать список с содержанием, которое будет крутиться на сайте.

<ul id="webTicker">
<li>Что такое хорошо?</li>
<li>Что такое плохо?</li>
<li>Как жить дальше?</li>
<li>Как сделать сайт?</li>
<li>Как раскрутить его?</li>
</ul>

4. В вашем JS-файле нужно выбрать с помощью jQuery список, который вы хотите преобразовать в скролл, и запустить функцию webTicker.

$('#webTicker').webTicker();

WebTicker активирован в списке при помощи #webTicker (id webTicker)

Настройки

При инициализации плагина вы можете передать параметры, чтобы изменить настройки, заданные по умолчанию. Это совершенно необязательно и используется только для удовлетворения ваших конкретных потребностей.

Настройка Описание По умолчанию
speed Скорось передвижения в секунду. Задается в пикселях — px 50
moving Определяет, должен продолжать движение после наведения или нет true
startEmpty Определяет, начинать показывать элементы в переделах видимого поля или нет true
duplicate Означает, что детали должны быть продублированы в случае необходимости, чтобы удалить любые пробелы false
hoverpause Пауза при наведении true
rssurl URL-адрес RSS-канала (обратите внимание на ограничения домена) false
rssfrequency Время (в минутах), необходимое для обновления RSS-канала. 0 означает отсутствие обновления 0
updatetype Определяет сбрасывать ли данные при обновлении или нет reset
transition Функция замедления для переходов linear
height Высота элементов. Строковое значение должно включать в себя значение ‘30px’
maskleft Изображение, чтобы быть использованы для наложения маски на левой стороне
maskright Изображение, чтобы быть использованы для наложения маски на правой стороне
maskwidth Определяет ширину маски 0

Методы

Методы могут быть вызваны с помощью JavaScript. Приведенная ниже таблица показывает доступные методы.

Метод Описание Пример
stop Останавливает элементы бегущей строки в текущей позиции Пример
cont Продолжается прокрутка элементов от текущего положения Пример
update Возможность обновления поддерживает два режима ‘swap’ и ‘reset’, которые устанавливаются соответственно при запуске акции. Функциональность подкачки использует данные-обновить атрибуты для идентификации элементов uniquie в списке. Если значение узла изменяется это просто ‘swapped’, оставляя его в той же позиции. Элементы не в «обновление» списка не удаляются, а новые будут добавлены в конце. Это поведение может быть изменено путем передачи последних двух параметров, ‘insert’ и ‘remove’. Логическое значение True будет означать, какие новые пункты должны быть добавлены/удалены соответственно. Значения по умолчанию для ‘insert’ истинно, в то время как ‘remove’, является ложным. Пример
transition Определяет, какой из переходов в использовании. Доступным переходом являются ‘linear’, которые прокручивается с нормальной и постоянной скоростью, и ‘ease’, который замедляется, когда элемент выходит из края web ticker границы. Пример

Отображение

Отображение WebTicker очень многое зависит от вас или разработчика, однако WebTicker можно слегка и изменить

Разметка

Итоговая разметка будет выглядеть примерно так:

<div class="tickercontainer">
    <div class="mask">
        <ul id="WebTicker">
            <li class="ticker-spacer"></li>
            <li>Как жить дальше?</li>
			<li>Как сделать сайт?</li>
			<li class="last">Как раскрутить его?</li>
        </ul>
        <span class="tickeroverlay-left"> </span>
        <span class="tickeroverlay-right"> </span>
    </div>
</div>

Элементы разметки

Класс Описание
tickercontainer Обертка самого плагина. Установка высоты и ширины
mask В первую очередь, используемый для настройки маски, еще один контейнер-обертка
ticker-spacer Используется, когда нет достаточного пространства, чтобы заполнить WebTicker с пунктами (пробелы)
tickeroverlay-left Класс, который может быть использован для определения поверх webticker (используется при определении левой наложение изображения)
tickeroverlay-right Определяет, какой из переходов в использовании. Доступным переходом являются ‘linear’, которые прокручивается с нормальной и постоянной скоростью, и ‘ease’, который замедляется, когда элемент выходит из края web ticker границы.
last Определяет, какой из переходов в использовании. Доступным переходом являются ‘linear’, которые прокручивается с нормальной и постоянной скоростью, и ‘ease’, который замедляется, когда элемент выходит из края web ticker границы.

Вроде бы все описал и на этом будем прощаться. До скорых встреч!

Вам понравилась статья?
плохохорошо (+2 баллов, 1 оценок)
Загрузка...
Обо мне
Юрич:
Занимаюсь созданием сайтов на ВордПресс более 5 лет. Работал в нескольких веб-студиях, да и сейчас работаю. Иногда подрабатываю на фрилансе, как на нашем так и на зарубежном. Везде зарекомендовал себя очень хорошо. Если нужен сайт на вордресс, шаблон для сайта или лендинг - не стесняйтесь - пишите. Рад буду помочь!
4 комментария к статье "Бегущая строка для сайта"
  1. Талгат: 08.09.2017 в 08:41 - Ответить

    Здравствуйте, спасибо Вам за инструкцию, хороший плагин как раз то что мне нужно, но вот уже как пять дней не могу найти его, дайте пожалуйста ссылку на плагин.
    Спасибо.

  2. Юрич: 08.09.2017 в 08:51 - Ответить

    Здравствуйте, Талгат!
    Прикрепил файл. После статьи кнопка исходники. Пользуйтесь на здоровье.

  3. Талгат: 08.09.2017 в 09:30 - Ответить

    Спасибо большое

  4. Юрич: 08.09.2017 в 09:39 - Ответить

    Не за что.