Дългите сайтове за превъртане се превърнаха в една много разпространена тенденция в уеб дизайна. Един от най-готините подтипове на това са сайтовете за превъртане на паралакса, където изображенията се движат, за да се получи ефект на паралакс. Тъй като потребителят се превърта надолу по страницата, анимациите се задействат изключено и като цяло дава свеж вид и усещане за всеки уебсайт, ако се прилага правилно.
Осъществяването на сайт за превъртане на паралакс често е досадно, защото изисква задълбочено познаване на CSS, Javascript и добър уеб дизайн, за да се спрат. Ето списък на най- добрите Parallax Scrolling Plugins, които не само улесняват създаването на сайтове за превъртане на паралакса, но също така разполагат с добре поддържана библиотека с ефекти на паралакс, така че да стане по-лесно и по-бързо да развиете добре изглеждаща уеб страница,
ОТКАЗ ОТ ОТГОВОРНОСТ : Преди да започнете, имайте предвид, че за да използвате тези приставки, се изисква известно познаване на уеб технологиите (HTML / CSS / Javascript). Повечето от изброените плъгини използват jquery, така че познаването на Jquery също може да е необходимо.
Плъгини за превъртане на паралакса
1. ScrollMagic
ScrollMagic е един от най-популярните и богати на функции плъгини за jquery. Това е JavaScript библиотека, която ви позволява да създавате привидно магически ефекти на превъртане. С помощта на ScrollMagic можете да анимирате въз основа на позицията си за превъртане. Това означава, че можете да поправяте, премествате или анимирате HTML елементи, докато превъртате, за каквато и да е продължителност, която искате, и също така лесно да добавяте паралаксни ефекти към уебсайта си. Тя е много адаптивна и също така е лека (6kb при gzipped). Сред останалите плъгини за паралакс, Scroll Magic има най-добрата документация и външни ресурси. Той е напълно съвместим с мобилния телефон.
ScrollMagic има много изброени примери. Проверете ги за вдъхновение и насоки за използването на тази библиотека.
Относно:
Начална страница: //janpaepke.github.io/ScrollMagic/
Създаден от: Jan Paepke
Инсталация:
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). За да използвате приставката, трябва да включите CSS и Javascript файл във вашия HTML. pagePiling.js се инициализира от (документ) .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
Stellar е плъгин jQuery, чрез който можете лесно да добавяте ефекти на паралакс. За да стартирате, първо трябва да изпълните функцията $ .stellar (). Настройките на анимацията за отделни елементи могат да бъдат конфигурирани с помощта на атрибути за данни на този елемент.
Звездното дори ви позволява да имате паралаксни фонове, които са фонове, които се преместят на превъртане. Едно от най-полезните функции на Stellar.js е компенсирането.
Всички елементи ще се върнат към първоначалното си позициониране, когато техните офсетни родители отговарят на ръба на екрана - плюс или минус собственото ви опционално компенсиране. Това ви позволява лесно да създавате сложни модели на паралакс. (Звездна документация)
Относно:
Начална страница: //markdalgleish.com/projects/stellar.js/
Създаден от: Mark Dalgeish
Инсталация: Изтеглете от 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/
Създаден от: Ник Пиърсън
Инсталация: Изтеглете от 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 Engine, което увеличава производителността на анимацията и гладкостта. Анимациите Superscrollorama се наричат чрез jQuery и можете да използвате и повечето TweenMax.js функции. За съжаление, тези анимации не се поддържат изцяло от мобилни устройства (защото устройствата на сензорния екран се справят с превъртането по различен начин). Въпреки това, използвайки метода setScrollContainerOffset, ефектите на Superscrollorama могат да бъдат достъпни на мобилни устройства.
Ето кода за това:
.setScrollContainerOffset(x, y)
(x: x отместването на контейнера за превъртане, y: x отместването на контейнера за превъртане)
Относно:
Начална страница: //johnpolacek.github.io/superscrollorama/
Създаден от: johnpolacek
Инсталация: Изтеглете от Github
ВИЖ СЪЩО: 10 най-добри генератора на статични сайтове
