simplyScroll - гибкий jQuery плагин для скролла контента

Сегодня мы рассмотрим плагин, который анимирует (прокручивает) контент, как автоматически, так и вручную, горизонтально, вертикально, вперёд, назад.

Возможности плагина

  • авто-скролл во все направления
  • поддержка сенсорных устройств
  • поддержка работы с изображениями различных размеров
  • есть возможность добавления кнопок пауза/воспроизведение
  • использование ScrollTop/ScrollLeft для лучшей производительности
  • поддержка цикличного движения элементов
  • оформление под себя через CSS & HTML
  • поддержка jQuery 1.2.6 и выше (протестирован до версии 1.7.1)
  • работает во многих версиях плагинов (включая IE6/7!)

Примеры

  1. Горизонтальная прокрутка
  2. С кнопками управления
  3. Вертикальная прокрутка
  4. Преобразованные HTML элементы
  5. Режим RTL
  6. Пауза и воспроизведение

Источник

Последнюю версию плагина можно найти на GitHub.

Конфигурация

Свойство Значение по умолчанию Описание
customClass 'simply-scroll' класс для стилизации
frameRate 24 скорость прокрутки (кадров в секунду)
speed 1 смещение изображений (пикселей в секунду)
orientation 'horizontal' 'horizontal’ или 'vertical' - ориентация прокрутки
direction 'forwards' 'forwards' или 'backwards' - направление
auto true автоматическая прокрутка. При использовании кнопок выставите в false
autoMode 'loop' auto = true, 'loop' или 'bounce', (выключает кнопки)
manualMode 'end' auto = false, 'loop' или 'end' (конец-к-концу)
pauseOnHover true Останавливать прокрутку при наведении мыши (работает при режиме auto)
pauseOnTouch true Поддержка тач-жестов (работает при режиме auto)
pauseButton false Кнопка паузы (работает при режиме auto)
startOnLoad false Инициализация плагина после window.load (для изначальной загрузки фотографий)

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://logicbox.net/jquery/simplyscroll/
Перевел: Станислав Протасевич
Урок создан: 17 Июня 2015
Просмотров: 14511
Правила перепечатки

5 последних уроков рубрики "jQuery"

^ Наверх ^