Smooth Div Scroll - горизонтальная прокрутка контента

17 фев 2013

jQuery плагин плавной горизонтальной прокрутки контента влево и вправо - Smooth Div Scroll .

  • Поддержка сенсорных устройств, таких как iPhone, iPad и Android смартфонов.
  • Именно плавная прокрутка, а не шагами.
  • Бесконечный цикл, по желанию.
  • Различные методы прокрутки: touch (касанием), хотспот (кнопками ввиде стрелок), колесиком мыши или автоскролинг. Или комбинации методов.
  • Прокрутка контента любого типа, а не только изображений
  • Easing опции для плавного скроллинга.

Как это работает?

Принцип лежащий в основе Smooth Div Scroll прост: один DIV (scrollArea ) прокручивается внутри другого DIV (scrollWrapper ). Две кнопки-стрелки используемые для запуска прокрутки (scrollingHotSpotLeft и scrollingHotSpotRight ). Также есть возможность включения прокрутки используя касание (пальцем) на сенсорном экране, колесиком мышки или же просто включение автопрокрутки. scrollWrapper - определяет какая область из scrollableArea будет видима - всё что за пределами дива scrollWrapper будет скрыто.

Рассмотрим Демо 1 в качестве примера работы плагина.

Мы установили такие параметры у плагина, что пользователь может прокручивать изображения с помощью кнопок-стрелок или с помощью колесика мыши. Также при загрузке страницы сделали автоскроллинг, а при наведении на панель прокрутки скроллинг останавливается. Сенсорная прокрутка для данного дема выключена, попробовать её работу можно в демо "touch скроллер "

HTML разметка

Структура html для этого демо будет такой:

Как видим имеем один контейнер с ID - makeMeScrollable. обращаясь к которому, будем его содержимое, в данном случае изображения (может быть и текст), превращаться в прокручивающийся блок.

Для правильного отображения элментам помещенным в этот контейнер нужно придать определенные CSS стили.

Плясать можно, например, от следующего варианта:

javascript

Для поддержки всех возможностей плагина нужно будет подключить на страницу следующие скрипты и библиотеки:

Тут у нас jQuery библиотека, далее jquery ui для пользовательских эффектов, jquery mousewheel для возможности прокрутки с помощью колесика мыши, kinetic для возможности прокрутки касанием (touch ) и сам плагин smoothdivscroll .

Вызов плагина в данном примере происходит следующим образом:

  • mousewheelScrolling. " allDirections " - прокрутка с помощью колеса мыши по всем направлениям (не все мыши имеют такую возможность)
  • manualContinuousScrolling. true - бесконечный скроллинг, зациклен.
  • autoScrollingMode. " onStart " - автопрокрутка при загрузке страницы, и пауза при наведении курсора на скроллер.

Опции

Настройка классов для элементов управления:

Разнообразные варианты:

  • countOnlyClass. "" (пустая строка) - string - функция, которая вычисляет общую ширину прокручиваемой области, будет рассчитывать ширину только тех элементов, класс которых будет указан в этой опции. Это может быть полезно, если у вас есть контент, который группируется столбиками и только столбики должны быть скроллируемыми. Иначе же плагин суммирует ширину всех элементов в столбцах.

startAtElementId. "" (пустая строка) - string - если вы хотите чтобы скроллер начинался с определенного элемента, то укажите его CSS идентификатор в этой опции и тогда прокрутка начнется именно с этого элемента, в противном случае прокрутка начнется с первого элемента.

Опции клавиш-стрелок (hot spot):

  • hotSpotScrolling. true - boolean (true/false) - активировать кнопки-стрелки (да/нет)? Если вы хотите использовать touch скроллинг, то лучше задать параметр этой опции в false.
  • hotSpotScrollingStep. 15 - number (в пикселях) - устанавливает размер шага для прокрутки. Большее значение сделают прокрутку быстрее, но менее плавной.
  • hotSpotScrollingInterval. 10 - number (мс) - количество миллисекунд между каждым шагом прокрутки. Большее значение сделает прокрутку медленнее, так как скроллер будет ждать дольше, прежде чем сделать следующий шаг. Параметр можно сравнить с кадрами в фильме, то есть это эквивалент количества кадров в секунду.
  • hotSpotMouseDownSpeedBooster. 3 - number (мультипликатор) - используйте эту опцию, если хотите увеличить скорость, когда пользователь нажимает мышкой на одну из кнопок-стрелок (влево/вправо). 1 - нормальная скорость, 2 - вдвое быстрее, чем нормальная, 3 - в три раза быстрее и так далее. По умолчанию установлено значение 3 .
  • visibleHotSpotBackgrounds. " hover " - string - Общие настройки для видимости кнопок:

Возможные значения: "" (пустая строка), " hover ", " onStart " или " always ".

  1. "" - пустая строка сделает фон кнопок невидимым всегда.
  2. hover - сделает фон кнопок видимым, только при наведении мыши на скроллер.
  3. onStart - делает видимым

    фон кнопок X -секунд (управляется через опцию hotSpotsVisibleTime ) сразу после загрузки страницы, потом они скрываются.

  4. always - фон кнопок (то есть сами кнопки) виден все время.

Важно отметить. что эта опция задает только видимость кнопок, даже установив параметр их невидимости, фактически, кнопки будут по прежнему активны. Если хотите, чтобы кнопки выглядели иначе, то измените их в photoshop и подправьте их CSS, а существующие кнопки станут для вас хорошей отправной точкой для собственных экспериментов.

  • hotSpotsVisibleTime. 5000 - number (мс) - если вы установили параметр " onStart " для опции visibleHotSpotBackgrounds. то по истечении того количества секунд, которое вы укажите тут, фон кнопок станет невидимым.
  • easingAfterHotSpotScrolling. true - boolean (true/false) - если вы хотите использовать easing эффекты после прокрутки вызываемой с помощью кнопок, то поставьте true .
  • easingAfterHotSpotScrollingDistance. 10 - number (в пикселях) - устанавливает расстояние в пикселях которое пройдет скроллер после использования кнопок, для его прокрутки. Большее значение сделает скроллер более плавным и спокойным, меньшее значение параметра придаст точности и жесткости. Рекомендуется вместе с этим параметром, также внести коррективы и в опцию easingAfterHotSpotScrollingDuration .
  • easingAfterHotSpotScrollingDuration. 300 - number (в мс) - устанавливаем время easing эффекта после прокрутки с помощью кнопок. Вместе с этой опцией, неплохо было бы настроить и параметр easingAfterHotSpotScrollingDistance
  • easingAfterHotSpotScrollingFunction. " easeOutQuart " - string - Эта опция определяет easing функцию, которая будет использована в конце прокрутки с помощью кнопок.

Опции прокрутки с помощью колесика мыши

  • mousewheelScrolling. "" - string - определяет будет ли активно колесико мыши для прокрутки и если да, то как она должна работать:

Возможные значения:

  1. "" - пустая строка - возможность прокрутки с помощью колесика отключена
  2. " vertical " - прокрутка привязана только к вертикальной прокрутке колесиком
  3. " horizontal " - прокрутка привязана только к горизонтальной прокрутке колесиком (есть не у всех мышей)
  4. " allDirections " - оба вида, и горизонтальная и вертикальная прокрутка может быть использована на мышке.
  • mousewheelScrollingStep. 70 - numberpx ) - число в пикселях на которое будет прокручивать скроллер, когда пользователь будет крутить колесико мыши. (Колесо мыши будет посылать номер, который обычно находится в интервале от -3 до 3 в зависимости от направления). Большее значение приведет к более быстрой прокрутке с помощью колесика за счет большего шага.
  • easingAfterMouseWheelScrolling. true - boolean (true/false) - Будут ли использоватся easing эффекты при прокрутке колесиком? (Да/Нет)
  • easingAfterMouseWheelScrollingDuration. 300 - number (в мс) - определяет время easing эффекта после завершения прокрутки колесиком
  • easingAfterMouseWheelScrollingFunction. " easeOutQuart " - string - устанавливает easing функцию, которая будет использоваться после завершения прокрутки с помощью колесика.

Опции прокрутки с помощью касания (touch)

  • touchScrolling. false - boolean (true/false) - установите true. если хотите использовать возможность прокрутки пальцем на сенсорных устройствах, типа iphone. ipad. android и т.п. Кроме того, зажав кнопку мыши и двигая её, скроллер также можно будет прокручивать. Для работы touch скроллинга нужно будет дополнительно подключить на странице скрипт jquery.kinetic. И рекомендуется отключить опцию hotSpotScrolling. которая не очень хорошо работает на сенсорных устройствах

Опции ручной прокрутки (горячие кнопки, колесико, touch скроллинг)

  • manualContinuousScrolling. false - boolean (true/false) - если установлено true. то ручная прокрутка будет непрерывной влево или вправо. Работает для всех типов: горячие кнопки, колесико или touch.

Опции авто скроллинга

  • autoScrollingMode. "" - string - определяет параметры авто прокрутки:

Возможные значения:

  1. "" (пустая строка) - не используйте эту опцию, или поставьте пустую строку, чтобы отключить автоматическую прокрутку.
  2. " onStart " - прокрутка начнется автоматически после загрузки страницы в соответсвии с опцией autoScrollDirection - определяющей направление, когда Вы переместите указатель мыши на левую или правую горячую клавишу или воспользуетесь колесиком мыши, то автопрокрутка остановится. После этого прокручивать можно будет только с помощью клавиш или колесика.
  3. " always " - горячие клавиши будут отключены, прокрутка будет происходить только в автоматическом режиме.
  • autoScrollingDirection :" endlessLoopRight " - string - опция определяет направление и поведение автоматической прокрутки, и используется только если автоскроллинг включен:

Источник: pcvector.net

Категория: Программное обеспечение

Похожие статьи: