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

0 0

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

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

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

Исходники
Источник

Оставьте ответ

Ваш электронный адрес не будет опубликован.