biblioteci JavaScript pentru efecte de defilare Cool

un design de site vine la viață cu animație bine executată. Dacă sunteți în căutarea bibliotecilor adecvate pentru a adăuga efecte la proiectul dvs., aici am făcut o listă cu unele dintre bibliotecile pe care le puteți utiliza pentru a da efecte pe baza evenimentului de derulare.

când un utilizator derulează pagina dvs. web, acțiunea poate fi proiectată pentru a declanșa o varietate de opțiuni de animație, cum ar fi efecte de estompare, estompare, 3D, paralaxă și multe altele. Există 25 de biblioteci JS aici care vă pot ajuta să obțineți acest tip de răspuns în designul site-ului dvs.

Citeste mai mult: 15 Exemple de defilare făcut chiar în site-ul web design

Scroll Reveal

o bibliotecă care îl face ușor pentru a adăuga animație de defilare atât pentru web și mobil. Puteți seta relaxarea personalizată, rotații 3D, durata și mulți parametri mor la elementul pe care doriți să animați.

dependențe: nici unul | Dimensiune: 2.9 kb | licență: MIT

Aniview

un plugin care funcționează împreună cu Animate.CSS pentru a activa animațiile numai atunci când elementul dvs. intră în viewport.

dependențe: jQuery / Dimensiune: 1kb / Licență: N / A

Fade In View

un plugin care adaugă efectul fade in/out elementelor atunci când intră sau ies din ferestrele predeterminate.

dependențe: jQuery | Dimensiune: 3.81 kb | Licență: N/a

WOW

WOW va dezvălui Animate.animații css la eveniment de parcurgere. Puteți seta durata animației, întârzierile, compensările și iterațiile chiar de la marcajul HTML, apoi apelați clasa elementului de la JS.

Dependențe: Anima.css / Dimensiune: 8.23 kb / licență: MIT

ScrollMagic

acest plugin va afișa un efect ‘magic’ atunci când un utilizator derulează pagina. Este perfect pentru animarea, fixarea unui element sau comutarea clasei CSS, toate bazate pe poziția de derulare. ScrollMagic poate lucra împreună cu GSAP și VelocityJS în crearea unei scene de animație. Vezi demo-urile complete aici.

dependențe: jQuery, GSAP, viteza.JS / Dimensiune: 16.9 kb | licență: MIT

jScrollability

jScrollability vă permite să creați pagini web unice cu animații complexe bazate pe defilare. La sroll-ul utilizatorului, elementul se va anima pe baza pozițiilor de defilare. Animațiile rulează în funcție de adâncimea de derulare și, desigur, puteți seta începutul și sfârșitul animației.

dependențe: jQuery | Dimensiune: 1.86 kb | licență: MIT

pushIn.js

o bibliotecă simplă pentru a adăuga efectul dolly-in sau push-in la orice element care funcționează atunci când un utilizator derulează pagina. Este ușor de implementat: trebuie doar să adăugați parametrii de pornire, oprire și viteză la data-params la elementul HTML.

dependențe: niciuna / Dimensiune: 4.94 kb / Licență: N / A

Scrollissimo

aceasta este o bibliotecă JS pentru a adăuga animații netede controlate de defilare. Se utilizeaza tweens Greensock și cronologii pentru a genera animații fine.

Dependențe: Greenshock TweenLite/TweenMax | Dimensiune: 2.94kb / Licență: N / A

Jquery animație Scroll Plugin

acesta este un plugin jQuery pentru a adăuga animație viewport declanșat folosind Greensock. Se face ușor de a anima elemente cu relaxarea, transforma, scară, rotație și animații 3D.

dependențe: jQuery, GreenShock / Dimensiune: 14kb / licență: GNU GPL

Circlr

Circlr vă permite să creați animația de rotație la un element, declanșat de defilare, evenimente mouse-ul sau evenimente touch. Este perfect pentru a face o casetă de prezentare a unui produs care poate fi vizualizat de la toate 360 de grade, activat de parcurgere utilizator.

dependențe: niciuna / Dimensiune: 6.05 kb | licență: MIT

Scrollimator

Scrollimator vă va arăta poziția și progresul defilare, și valorile returnate pe care le puteți utiliza pentru a schimba animatii tween atașate la comportamentul de defilare utilizator. Aceasta susține defilare verticală și orizontală.

dependențe: niciuna / Dimensiune: 37.7 kb / Licență: N / A

Crossfade

Crossfade este un plugin pentru a adăuga efectul crossfade la o imagine. Efectul neclare va continua ca un utilizator derulează mai jos.

dependențe: jQuery / Dimensiune: 3.19 kb | licență: MIT

Page Scroll Effect

aceasta este o bibliotecă pentru efecte experimentale de derulare a paginilor create de CodyHouse. Se utilizeaza velocitey.animații js.

dependențe: jQuery, viteză.js / Dimensiune: 17.6 kb | Licență: N/a

jquery.parallax-scroll

această bibliotecă vă permite să adăugați neted un efect de paralaxă la defilare pagină verticală. Doar import jQuery și jquery.relaxare.1.3.js, apoi adăugați atributul 'data-parallax' și patametrele opționale la elementul dvs. pentru a personaliza efectul.

dependențe: jQuery, jQuery.relaxare / Dimensiune: 8.72 kb / licență: GNU GPL

parallax.js

paralaxă.js este un plugin simplu care adaugă efectul de defilare parallax, inspirat de site-ul Spotify.

dependențe: jQuery / Dimensiune: 6.63 kb / Licență: MIT

Enllax

Enllax este o bibliotecă foarte ușor pentru utilizarea pe aplicarea efectului de paralaxă la orice element de defilare. Puteți seta elemente de fundal sau de prim-plan pentru a avea acest efect. Funcționează atât pentru derularea verticală, cât și pentru cea orizontală.

dependențe: jQuery | Dimensiune: 1.53 kb | licență: MIT

Blur on scroll

această bibliotecă vă ajută să adăugați efectul de estompare la o imagine, care va fi declanșată de defilare pagină. Cu cât derulați mai adânc pagina, cu atât imaginea devine mai neclară.

dependențe: niciuna / Dimensiune: 1.1 kb | Licență: N / A

boxLoader

boxLoader este un plugin simplu pentru a încărca elemente pe pagina de defilare. Parametrul pe care ar trebui să-l setați sunt direcțiile (x sau y), poziția pe procent, efect și, de asemenea, durata.

dependențe: jQuery / Dimensiune: 3.42 kb | Licență: N / A

pagina înclinat Scroll

ca un utilizator derulează printr-o pagină, Acest plugin va dezvălui un efect 3D înclinat minunat la elementul pe care l-ați configurat.

dependențe: jQuery / Dimensiune: 1.5 kb / licență: GNU GPL

AhRelax

AhRelax oferă o modalitate de a face animații rapide bazate pe defilare. Este lighweight și are, de asemenea, o mare performanță. Puteți citi mai multe despre asta aici.

dependențe: jQuery / Dimensiune: 1.6 kb | Licență: MIT

Fancy Scroll

dacă vedeți vreodată efectul overflow scroll pe Android sau iOS, cu acest plugin puteți aplica acum acest lucru pe site-ul dvs. Puteți adăuga o animație, fie o saritura sau strălucire, atunci când un utilizator ajunge în partea de sus/de jos a paginii.

dependențe: jQuery | Dimensiune: 2.64 kb | licență: GNU GPL

parallax image scroll

acest plugin va face elemente float și pentru a muta ca un utilizator derulează în jos sau în sus pagina.

dependențe: jQuery / Dimensiune: 8.69 kb | Licență: MIT

Rlsmooth

acesta este un plugin mic pentru a crea efectul de curgere atunci când un utilizator scolls în jos sau în sus a paginii. Există trei efecte disponibile: slide, fade și show.

dependențe: jQuery / Dimensiune: 1.95 kb | licență: MIT

Scrollme

adaugă efecte simple la pagina de defilare, cum ar fi scară, roti, traduce și Schimbarea opacitatea elementelor. Este ușor de configurat: importați jQuery, acest plugin și setați parametrii de animație pe marcajul elementului.

dependențe: jQuery / Dimensiune: 5.45 kb / Licență: N / A

Parallax ImageScroll

acest plugin vă permite să dați un efect de paralaxă oricărei imagini de pe pagina dvs. Se face uz de CSS3 transforma pentru a face munca efect. Acest plugin are suport pentru jQuery și AMD.

dependențe: jQuery / Dimensiune: 8.01 kb / licență: MIT