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