Топ плагінів jQuery. Плагін jInvertScroll

2

Від автора: вітаю вас, друзі. Починаючи з цієї статті ми приступимо до знайомства з ТОП плагінів jQuery. Перший плагін, з яким ми познайомимося, — це плагін jInvertScroll, який дозволяє змінити скролл сторінок зі стандартного вертикального на горизонтальний.

Отже, друзі, ми з вами розглянули у статтях безліч тем, що стосуються jQuery. Зокрема, у ряді останніх статей ми з вами розглянули різні слайдери і каруселі jQuery. У новому циклі статей ми розглянемо ТОП плагінів jQuery, які стануть в нагоді на будь-якому сайті і допоможуть зробити вашу сторінку оригінальною і неповторною.

Перший плагін, який ми розглянемо, це плагін jInvertScroll, який замінює вертикальний скролл сторінок горизонтальним, тобто при прокручуванні сторінки мишею ми побачимо рух не зверху вниз, зліва направо. Ефект підійде далеко не для кожного сайту, але безперечно — ефект дійсно оригінальний.

Скачайте плагін з репозиторію GitHub або візьміть його з вихідного коду. Тепер підключимо файли плагіна і бібліотеку jQuery.

Тепер нам потрібно верстка, в якій створимо кілька секцій.

Топ плагінів jQuery. Плагін jInvertScroll
Топ плагінів jQuery. Плагін jInvertScroll
Топ плагінів jQuery. Плагін jInvertScroll

блок з контентом
блок з контентом
блок з контентом
блок з контентом

Щоб рух було візуально помітно, встановимо для кожної секції свою картинку великих розмірів. В останньому блок помістимо блоки з контентом, який також буде крутитися, як і фонові картинки, створюючи ефект паралакса.

Для кожної секції задамо наступні обов’язкові стильові правила:

.scroll{
position: fixed;
bottom: 0;
}

Залишилося викликати плагін, передавши йому як параметр масив секцій (у нас це все секції з класом scroll):

$(function() {
$.jInvertScroll([‘.scroll’]);
});

Інші стилі Ви можете подивитися в исходниках до уроку. Якщо ми все зробили правильно, то в результаті отримаємо симпатичний ефект паралакса з горизонтальною прокруткою елементів.

На цьому сьогодні все. Вихідні коди до статті ви можете завантажити за посиланням. Більше про jQuery і бібліотеці jQuery UI ви можете дізнатися з наших уроків або курсу. Удачі!