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