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

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

Очень давно искал плагин бегущей строки для сайта, но так нормального и не нашел, но вот недавно наткнулся на зарубежном сайте на классную бегущую строку. Посмотрел как она реализована и нашел 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 лет. Работал в нескольких веб-студиях, да и сейчас работаю. Иногда подрабатываю на фрилансе, как на нашем так и на зарубежном. Везде зарекомендовал себя очень хорошо. Если нужен сайт на вордресс, шаблон для сайта или лендинг - не стесняйтесь - пишите. Рад буду помочь!