Библиотеки на JavaScript за ефекти на хладно превъртане

Дизайнът на уеб сайта оживява с добре изпълнена анимация. Ако търсите подходящи библиотеки, за да добавите ефекти към вашия проект, тук направих списък на някои от библиотеките можете да използвате, за да дадете ефекти, базирани на събитието за превъртане.

Когато потребител превърта надолу уеб страницата си, действието могат да бъдат проектирани да задействат различни опции за анимация като ефекти на избледняване, размазване, 3D, паралакс и др. Тук има 25 JS библиотеки, които могат да ви помогнат да постигнете такъв отговор в дизайна на сайта.

Превъртане Разкриване

Библиотека, която улеснява добавянето на анимация за превъртане както за уеб, така и за мобилни устройства. Можете да настроите персонализиране, 3D завъртания, продължителност и много параметри към елемента, който искате да анимирате.

Зависимости: няма | Размер: | 2.9kb | Разрешително: MIT

Aniview

Плъгин, който работи заедно с Animate.CSS, за да активира анимациите само когато елементът ви влезе в екрана за изглед.

Зависимости: jQuery | Размер: 1kb | Разрешително: N / A

Избледняване в изгледа

Плъгин, който добавя ефекта на избледняване в / към елементи, когато влизат или излизат предварително зададени екрани за виждане.

Зависимости: jQuery | Размер: 3.81kb | Разрешително: N / A

ЕХА

WOW ще разкрие Animate.css анимации при скрол събитие. Можете да настроите продължителността на анимацията, закъсненията, компенсациите и повторенията директно от HTML маркирането, след това просто извикайте класа на елемента от JS.

Зависимости: Animate.css | Размер: 8.23kb | Разрешително: MIT

ScrollMagic

Този плъгин ще покаже ефект "Magical", когато потребителят превърта страницата. Той е идеален за анимация, закрепване на елемент или превключване на CSS класа, като всички те се основават на позицията за превъртане. ScrollMagic може да работи заедно с GSAP и VelocityJS при създаването на анимационна сцена. Вижте пълните демонстрации тук.

Зависимости: jQuery, GSAP, Velocity.js | Размер: 16.9kb | Разрешително: MIT

jScrollability

jScrollability ви позволява да създавате отделни уеб страници със сложни анимации, базирани на превъртане. При потребителски скрол елементът ще анимира въз основа на позициите за превъртане. Анимациите се изпълняват на базата на дълбочината на превъртане и разбира се можете да зададете началото и края на анимацията.

Зависимости: JQuery | Размер: 1.86kb | Разрешително: MIT

pushIn.js

Една проста библиотека, която може да добави ефекта „Доли-ин“ или „push-in“ към всеки елемент, който работи, когато потребителят превърта през страницата. Лесно е да се изпълни: просто добавете началните, крайните и скоростните параметри към данни PARAMS към вашия HTML елемент.

Зависимости: нито един | Размер: 4.94kb | Разрешително: N / A

Scrollissimo

Това е JS библиотека за добавяне на гладка анимация, контролирана от превъртане. Той използва tweens на Greensock и срокове за генериране на гладка анимации.

Зависимости: GreenShock TweenLite / TweenMax | Размер: 2.94kb | Разрешително: N / A

jQuery Анимационен плъгин за превъртане

Това е плъгин на jQuery, който добавя анимация, задействана от viewport, използвайки Greensock. Той улеснява анимирането на елементи с улесняване, трансформиране, мащабиране, ротация и 3D анимации.

Зависимости: jQuery, GreenShock | Размер: 14kb | Разрешително: GNU GPL

Circlr

Circlr ви позволява да създадете ротационна анимация за елемент, задействан от превъртане, събития с мишката или събития с докосване. Той е перфектен, за да направи витрина на продукт, който може да се гледа от всички 360 градуса, активиран от потребителския скрол.

Зависимости: нито един | Размер: 6.05kb | Разрешително: MIT

Scrollimator

Scrollimator ще ви покаже позицията и превъртете напредъка и ще върнете стойности, които можете да използвате, за да промените анимациите, прикрепени към поведението на потребителя. Поддържа вертикално и хоризонтално превъртане.

Зависимости: нито един | Размер: 37.7kb | Разрешително: N / A

Преливане

Crossfade е плъгин, който добавя ефекта на кросфайд към изображение. Размазаният ефект ще продължи, докато потребителят превърта надолу.

Зависимости: JQuery | Размер: 3.19kb | Разрешително: MIT

Ефект на превъртане на страница

Това е библиотека за експериментални ефекти за превъртане на страници, създадени от CodyHouse. Той използва velocitey.js анимации.

Зависимости: jQuery, Velocity.js | Размер: 17.6kb | Разрешително: N / A

jquery.parallax превъртане

Тази библиотека ви позволява да добавите плавен ефект на паралакса към вертикалното превъртане на страници. Просто импортирайте jQuery и jquery.easing.1.3.js, след това добавете "Данни паралакс" атрибут и незадължителни patameters за вашия елемент, за да персонализирате ефекта.

Зависимости: jQuery, jQuery.easing | Размер: 8.72kb | Разрешително: GNU GPL

parallax.js

Parallax.js е прост плъгин, който добавя ефект на паралакс скрол, вдъхновен от уебсайта Spotify.

Зависимости: JQuery | Размер: 6.63kb | Разрешително: MIT

Enllax

Enllax е супер лека библиотека за използване при прилагане на паралаксния ефект към всеки елемент за превъртане. Можете да зададете елементи на фона или на преден план, за да имате ефект на етиката. Работи както за вертикално, така и за хоризонтално превъртане.

Зависимости: JQuery | Размер: 1.53kb | Разрешително: MIT

Размазване на превъртане

Тази библиотека ви помага да добавите ефекта на размазване към изображение, което ще се задейства чрез превъртане на страници. Колкото по-дълбоко превъртате надолу по страницата, толкова по-неясно е изображението.

Зависимости: нито един | Размер: 1.1kb | Разрешително: N / A

boxLoader

boxLoader е прост плъгин за зареждане на елементи при превъртане на страницата. Параметърът, който трябва да зададете, са посоките (x или y), позицията на процента, ефектът и продължителността.

Зависимости: JQuery | Размер: 3.42kb | Разрешително: N / A

Наклонена страница Превъртане

Когато потребителят превърта през страница, този плъгин ще покаже страхотен 3D наклон на елемента, който сте задали.

Зависимости: JQuery | Размер: 1.5kb | Разрешително: GNU GPL

AhRelax

AhRelax предлага начин да направите бързи анимации, базирани на превъртане. Това е леко тегло и също има отлична производителност. Можете да прочетете повече за него тук.

Зависимости: JQuery | Размер: 1.6kb | Разрешително: MIT

Fancy Scroll

Ако някога видите ефекта на преливане върху Android или iOS, с този плъгин вече можете да го приложите към сайта си. Можете да добавите анимация, или отскачаща или светеща, когато потребителят достигне горната / долната част на страницата.

Зависимости: JQuery | Размер: 2.64kb | Разрешително: GNU GPL

Превъртане на паралакс изображение

Този плъгин ще направи елементите поплавъци и ще се движат, когато потребителят превърта надолу или нагоре по страницата.

Зависимости: JQuery | Размер: 8,69kb | Разрешително: MIT

Rlsmooth

Това е малък плъгин, който създава течащ ефект, когато потребителят превърта надолу или нагоре страницата. Има три ефекта: слайд, избледняване и показване.

Зависимости: JQuery | Размер: 1.95kb | Разрешително: MIT

Scrollme

Добавя прости ефекти към превъртането на страници, като например мащабиране, завъртане, превод и промяна на непрозрачността на елементите. Лесно е да се настрои: просто импортирайте jQuery, този плъгин и задайте анимационните параметри върху маркировката на елемента.

Зависимости: JQuery | Размер: 5.45kb | Разрешително: N / A

Паралакс ImageScroll

Този плъгин ви позволява да дадете ефект на паралакс на всяко изображение на вашата страница. Той използва CSS3 Transform, за да направи ефекта ефективен. Този плъгин има поддръжка за jQuery и AMD.

Зависимости: JQuery | Размер: 8,01kb |. \ T Разрешително: MIT