jQuery плагін плавної горизонтальній прокрутки контенту вліво і вправо - Smooth Div Scroll.
Як це працює?
Принцип лежить в основі Smooth Div Scroll простий: один DIV (scrollArea) прокручується всередині іншого DIV (scrollWrapper). Дві кнопки-стрілки використовуються для запуску прокрутки (scrollingHotSpotLeft і scrollingHotSpotRight). Також є можливість включення прокрутки використовуючи дотик (пальцем) на сенсорному екрані, коліщатком мишки або ж просто включення автопрокрутки. scrollWrapper - визначає яка область з scrollableArea буде видима - все що за межами діва scrollWrapper буде приховано.
Розглянемо Демо 1 як приклад роботи плагіна.
Ми встановили такі параметри у плагіна, що користувач може прокручувати зображення за допомогою кнопок-стрілок або за допомогою коліщатка миші. Також при завантаженні сторінки зробили автоскроллінг, а при наведенні на панель прокрутки скролінг зупиняється. Сенсорна прокрутка для даного дема вимкнена, спробувати її роботу можна в демо "touch скроллер"
Структура html для цього демо буде такою:
Як бачимо маємо один контейнер з ID - makeMeScrollable. звертаючись до якого, будемо його вміст, в даному випадку зображення (може бути і текст), перетворювати в прокручується блок.
Для правильного відображення елементів поміщених в цей контейнер потрібно вказати певні CSS стилі.
Відштовхуватися можна, наприклад, від наступного варіанта:
У цьому демо немає відступів між картинками, якщо вам вони потрібні, то використовуйте властивість padding. а не margin (який викликає помилки в IExplorer).
Для підтримки всіх можливостей плагіна потрібно буде підключити на сторінку такі скрипти і бібліотеки:
Тут у нас jQuery бібліотека, далі jquery ui для призначених для користувача ефектів, jquery mousewheel для можливості прокрутки за допомогою коліщатка миші, kinetic для можливості прокрутки дотиком (touch) і сам плагін smoothdivscroll.
Виклик плагіна в даному прикладі відбувається наступним чином:
- mousewheelScrolling. "AllDirections" - прокрутка за допомогою колеса миші в усіх напрямках (не всі миші мають таку можливість)
- manualContinuousScrolling. true - нескінченний скролінг, зациклений.
- autoScrollingMode. "OnStart" - автопрокрутка при завантаженні сторінки, і пауза при наведенні курсору на скроллер.
Перелік всіх опції буде нижче.
Опцій досить багато, але ви можете встановити тільки ті, які потрібні саме вам, інші параметри будуть встановлені в режимі - за умовчанням.
(Після. (Двокрапки) вказані дефолтні значення параметрів)
Налаштування класів для елементів управління:
- scrollingHotSpotLeftClass. "ScrollingHotSpotLeft" - string - CSS клас для лівої гарячої кнопки
- scrollingHotSpotRightClass. "ScrollingHotSpotRight" - string - CSS клас для правої гарячої кнопки
- scrollableAreaClass. "ScrollableArea" - string - CSS клас для фактичного елемента, який можна прокручувати вліво або вправо
- scrollWrapperClass. "ScrollWrapper" - string - CSS клас для елемента оболонки
Різноманітні варіанти:
- hiddenOnStart. false - boolean (true / false) - Визначає чи буде видимим або прихованим скроллер при завантаженні сторінки.
- getContent # 111; nload. <> (Порожній об'єкт) - object - використовуйте цю опцію, щоб перенести зовнішнє вміст в скроллер при завантаженні сторінки. Даною налагодженні потрібно передати ім'я методу, який ви хочете використовувати для завантаження контенту, джерело контенту, маніпуляції методом (як контент буде додаватися в скроллер) і опціонально фільтрація тегів (селектор, який використовується для фільтрації тільки певного контенту з контенту, який обраний для перенесення) :
- 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".
- "" - порожній рядок зробить фон кнопок невидимим завжди.
- hover - зробить фон кнопок видимим, тільки при наведенні миші на скроллер.
- onStart - робить видимим фон кнопок X -секунд (управляється через опцію hotSpotsVisibleTime) відразу після завантаження сторінки, потім вони ховаються.
- 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 - визначає чи буде активно коліщатко миші для прокрутки і якщо так, то як вона повинна працювати:
- "" - порожній рядок - можливість прокрутки за допомогою коліщатка відключена
- "Vertical" - прокрутка прив'язана тільки до вертикального прокручування коліщатком
- "Horizontal" - прокрутка прив'язана тільки до горизонтального прокручування коліщатком (тобто не у всіх мишей)
- "AllDirections" - обидва види, і горизонтальна і вертикальна прокрутка може бути використана на мишці.
- mousewheelScrollingStep. 70 - number (в px) - число в пікселях на яке буде прокручувати скроллер, коли користувач буде крутити коліщатко миші. (Колесо миші буде посилати номер, який зазвичай знаходиться в інтервалі від -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 - визначає параметри авто прокрутки:
- "" (Порожній рядок) - не використовуйте цю опцію, або поставте вільну позицію, щоб відключити автоматичну прокрутку.
- "OnStart" - прокрутка почнеться автоматично після завантаження сторінки у відповідності з опцією autoScrollDirection - визначає напрямок, коли Ви наведіть курсор миші на ліву чи праву клавішу швидкого або скористаєтеся коліщатком миші, то автопрокрутка зупиниться. Після цього прокручувати можна буде тільки за допомогою клавіш або коліщатка.
- "Always" - гарячі клавіші будуть відключені, прокрутка буде відбуватися тільки в автоматичному режимі.
- autoScrollingDirection: "endlessLoopRight" - string - опція визначає напрямок і поведінку автоматичної прокрутки, і використовується тільки якщо автоскроллінг включений:
- "Right" - автоскроллінг вправо і зупинка на останньому слайді.
- "Left" - автопрокрутка вліво і зупинка на останньому слайді. Установка цього параметра на "left" має сенс тільки якщо Ви встановите опцію startAtElementld. Інакше прокрутка починається з першого слайда і отже прокрутка вліво не зможе початися.
- "BackAndForth" - Автопрокрутка починається вправо, коли вона дійде до кінця, відбудеться автоматичне зміна напрямку і прокрутка піде вліво і т.д. як в пінг-понг.
- "EndlessLoopRight" - автоматична безперервна прокрутка вправо
- "EndlessLoopLeft" - автоматична безперервна прокрутка вліво
- autoScrollingStep. 1 - number (в px) - встановлює довжину кроку для автопрокрутки. Більше значення зробить прокрутку швидше, але і зробить її менш плавною.
- autoScrollingInterval. 10 number (в мс) - встановлює кількість мілісекунд між кроками прокрутки. Більше значення зробить прокрутку повільніше, так як прокрутка буде чекати довше часу, перш ніж зробити наступний крок. Даний параметр можна порівняти з кількістю кадрів в секунду в фільмі.
Опції для методу scrollToElement
- scrollToAnimationDuration. 1000 - number (в мс) - встановлює час анімації прокрутки до конкретного елемента
- scrollToEasingFunction: "easeOutQuart" - string - визначає яка easing функція буде використовуватися
СКАЧАТИ Стрибок: 6687
1,74 Mb Хто скачав?