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

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

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

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

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

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

Ко мне часто поступают вопросы про хостинг, которым я пользуюсь и поэтому решил указать хостинг в статье https://sprinthost.ru. Вы можете попробовать попользоваться хостингом 30 дней бесплатно. Чтобы понять, как будет работать Ваш сайт на этом хостинге просто перенести свой сайт (в этом поможет поддержка хостинга бесплатно) и и таким образом сможете понять подходит хостинг Вам или нет. На этом хостинге находятся сайты с 20 000 тысяч посещаемость и сайты чувствуют себя отлично. Рекомендую! Да, если делать оплату на 1 год то получаете скидку 25%. И что мне нравится - тех. поддержка всегда помогает в технических вопросах, за что им спасибо. Как Вы понимаете не всегда проходит всё гладко и нет желания, чтобы сайт не был доступен тем самым страдал трафик и доход.

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

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

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Скорось передвижения в секунду. Задается в пикселях — px50
movingОпределяет, должен продолжать движение после наведения или нетtrue
startEmptyОпределяет, начинать показывать элементы в переделах видимого поля или нетtrue
duplicateОзначает, что детали должны быть продублированы в случае необходимости, чтобы удалить любые пробелыfalse
hoverpauseПауза при наведенииtrue
rssurlURL-адрес 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 границы.

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


Обо мне
Юрич:
Занимаюсь созданием сайтов на WordPress более 6 лет. Ранее работал в нескольких веб-студиях и решил делиться своим опытом на данном сайте. Пишите комментарии, буду рад общению.
5 комментариев к статье "Бегущая строка для сайта"
  1. Sergey: 21.08.2018 в 17:47

    Попробую у себя.Пока только пользуюсь пуш-сервисом.

  2. Юрич: 08.09.2017 в 09:39

    Не за что.

  3. Талгат: 08.09.2017 в 09:30

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

  4. Юрич: 08.09.2017 в 08:51

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

  5. Талгат: 08.09.2017 в 08:41

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

Заказать сайт