Довгі прокручувальні сайти стали дійсно поширеною тенденцією веб-дизайну. Одним з найхолодніших підтипів цього поля є сайти прокрутки паралакса, де зображення рухаються, щоб видати ефект паралакса. Коли користувач прокручує сторінку вниз, анімації вимикаються, і загалом вона надає свіжий вигляд будь-якому веб-сайту, якщо його правильно реалізовано.
Створення сайту прокрутки паралакса часто стомлює, тому що вимагає глибоких знань про CSS, Javascript і хороший веб-дизайн для зняття. Ось список кращих плагінів прокрутки паралакса, які не тільки полегшують створення сайтів прокрутки паралакса, але й мають добре створену бібліотеку ефектів паралакса, завдяки чому вам буде легше і швидше розробляти красиву веб-сторінку .
ВІДМОВА ВІД ВІДПОВІДАЛЬНОСТІ : Перед початком роботи зверніть увагу на те, що для використання цих плагінів необхідне певне знання веб-технологій (HTML / CSS / Javascript). Більшість перелічених плагінів використовують jquery, тому знання про Jquery також може знадобитися.
Плагіни прокрутки паралакса
1. ScrollMagic
ScrollMagic є одним з найпопулярніших і багатофункціональних плагінів для jquery. Це бібліотека JavaScript дозволяє створювати, здавалося б, магічні ефекти прокручування. За допомогою ScrollMagic ви можете анімувати на основі позиції прокручування. Це означає, що ви можете виправляти, переміщати або анімувати елементи HTML під час прокрутки, незалежно від тривалості, яку ви хочете, а також легко додавати ефекти паралакса до вашого сайту. Це дуже настроюється і також легкий (6kb при gzipped). Серед інших плагінів прокрутки паралакса, Scroll Magic має кращу документацію та зовнішні ресурси. Він ідеально сумісний з мобільним пристроєм.
ScrollMagic має багато перелічених прикладів. Перевірте їх на натхнення та рекомендації щодо використання цієї бібліотеки.
Про:
Домашня сторінка: //janpaepke.github.io/ScrollMagic/
Створено: Ян Пепке
Встановлення:
1. CDN:
2. Завантажити з Github
2. skrollr
skrollr - це легка чиста бібліотека Javascript і CSS, в якій немає жодного jQuery. Це в основному спрощена магія прокрутки для CSS. Для використання skrollr, вам не потрібно знати Javascript або будь-який jQuery. Досить просто HTML і CSS. skrollr використовує атрибути даних для анімації будь-якого потрібного HTML-елементу. Один з головних недоліків skrollr полягає в тому, що анімація працює тільки під час прокрутки сторінки. В іншому випадку всі ефекти ставляться на утримання. skrollr дозволяє анімувати всі властивості CSS елементів HTML.
Про:
Домашня сторінка: //prinzhorn.github.io/skrollr/
Створено: Prinzhorn
Встановлення: Завантажити з Github
3. pagePiling.js 
Page Piling - це плагін jQuery, який дозволяє створювати веб-сайт у різних розділах, які складаються один на одного. Після прокрутки або доступу до URL кожна секція виявляється в акуратній ковзній анімації. pagePiling.js сумісний з усіма платформами - настільними, планшетними та мобільними - і працює з більшістю браузерів. Він витончено деградує на старих браузерах, які не підтримують його анімацію (наприклад, IE 7). Щоб використовувати плагін, потрібно включити у свій HTML CSS і файл Javascript. pagePiling.js ініціалізується функцією (document) .ready:
$( document ).ready( function () {
$( ' #pagepiling ' ).pagepiling();
});
Для більш досконалих ініціалізацій перегляньте README.md.
Про:
Домашня сторінка: //alvarotrigo.com/pagePiling/
Створено: alvarotrigo
Встановлення: Завантажити з Github
4. Алтон
Alton - це jQuery 'scroll-jacking до нас' плагін. Прокручування під рукою означає, що власний прокручування вашого браузера вимкнено на користь цільового прокручування, який при ініціюванні (за допомогою коліщатка миші або тачпада) переходить до наступної вертикальної точки на екрані або до верхньої частини наступного контейнера.
Alton дозволяє використовувати три окремі функціональні можливості: "Hero", "Bookend" і "Standard". Стандартний дозволяє використовувати повну прокрутку сторінки, з кожним розділом 100% висоти. Прокрутка виводить наступний розділ або попередній розділ. Bookend дозволяє створювати досвід роботи з книгами, тоді як Hero дозволяє прокручувати гніздо тільки в розділі "Hero", а решта сторінки має (повторно увімкнено) рідну прокрутку.
Про:
Домашня сторінка: //paper-leaf.com/alton-jquery-scroll-jacking-plugin/
Створено: paper-leaf
Встановлення: Завантажити з Github
5. Stellar.js
Зоряний плагін JQuery, за допомогою якого можна легко додавати ефекти прокрутки паралакса. Для запуску потрібно спочатку виконати функцію $ .stellar (). Налаштування анімації для окремих елементів можна налаштувати за допомогою атрибутів даних цього елемента.
Зоряний навіть дозволяє мати паралакс фони, які є фони, які змінюються на прокрутку. Однією з найкорисніших функцій Stellar.js є зміщення.
Всі елементи повернуться до свого початкового положення, коли їх зміщення батьків відповідає краю екрану, плюс або мінус власний необов'язковий зсув. Це дозволяє легко створювати складні моделі паралакса. (Зоряна документація)
Про:
Домашня сторінка: //markdalgleish.com/projects/stellar.js/
Створено: Марк Далгейш
Встановлення: Завантажити з Github
6. multiScroll.js
Цей плагін створений тим самим розробником (alvarotrigo), який створив плагін pagePiling.js. Те, що в основному виконується в декількох прокрутках, дозволяє створювати ефект, коли кожний розділ сторінки завантажується в дві розділені частини, які ковзають на місце під час завантаження сторінки. Перегляньте домашню сторінку, щоб побачити, як це виглядає у вашому веб-переглядачі. multiScroll.js дозволяє встановити швидкість прокрутки, полегшення, опцію прокручування клавіатури та багато інших властивостей, щоб можна було налаштувати ефект саме так, як вам потрібно.
Про:
Домашня сторінка: //alvarotrigo.com/multiScroll/
Створено: alvarotrigo
Встановлення: Завантажити з Github
7. ScrollMe
ScrollMe - це плагін для додавання простих ефектів прокрутки паралакса до вашої сторінки. Він може масштабувати, обертати, перекладати і змінювати непрозорість елементів на сторінці, коли ви прокручуєте вниз. ScrollMe не потребує Javascript, і достатньо знань CSS. Додавши клас "animateme" і необхідні атрибути даних, можна анімувати будь-який елемент HTML. ScrollMe найкраще використовувати для додавання ефектів CSS. Він легкий і всі анімації плавні, якщо ви використовуєте їх у міру.
Про:
Домашня сторінка: //scrollme.nckprsn.com/
Створено: Nick Pearson
Встановлення: Завантажити з Github
8. Прокрутка паралакса
Parallax Scroll - простий у використанні JQuery плагін, який дозволяє створювати ефект прокрутки зображення паралакса, який можна знайти на сайтах, таких як Spotify. Він досить простий у використанні - просто вкажіть необхідні класи CSS для власників зображень. Замість використання Щоб використовувати цей плагін, ви повинні використовувати елементи, які мають вказане фонове зображення (за допомогою властивості CSS `background-image`. Ви можете зробити відповідні елементи за допомогою CSS @media queries.
Про:
Домашня сторінка: //parallax-scroll.aenism.com/
Створено: Aen
Встановлення: Завантажити з Github
9. Jarallax
Jarallax - це бібліотека CSS і Javascript, яка спеціалізується на ефектах прокрутки паралакса. Jarallax налаштований за допомогою Javascript (немає jQuery, просто чистий ванільний JS). Він підтримує згладжені функції прокручування, ослаблення та анімацію паралакса. Jarallax підтримується більшістю браузерів, на різних платформах. Веб-сайт Jarallax має чудову документацію про те, як налаштувати Jarallax для ваших потреб. Jarallax також має відео-уроки, що показують, як налаштувати Jarallax для вашого сайту і як почати роботу.
Про:
Домашня сторінка: //www.jarallax.com/
Створено: Jarallax
Встановлення: Завантажити з веб-сайту Jarallax
10. Суперкрохлорама
Superscrollorama - це плагін на основі jQuery, який підтримує анімацію прокрутки. Він оснащений TweenMax та двигуном Greensock Tweening, який підвищує продуктивність анімації та гладкість. Анімації Superscrollorama викликаються через jQuery, і ви також можете використовувати більшість функцій TweenMax.js. На жаль, ці анімації не повністю підтримуються мобільними пристроями (оскільки пристрої з сенсорним екраном обробляють прокрутку іншим способом). Однак за допомогою методу setScrollContainerOffset до ефектів Superscrollorama можна отримати доступ на мобільних пристроях.
Ось код для цього:
.setScrollContainerOffset(x, y)
(x: зміщення x зміщувача контенту, y: зміщення x зміщувача)
Про:
Домашня сторінка: //johnpolacek.github.io/superscrollorama/
Створено: johnpolacek
Встановлення: Завантажити з Github
ДИВІТЬСЯ ТАКОЖ: 10 кращих генераторів статичних сайтів
