Biblioteci JavaScript pentru efecte de derulare reci

Un design al site-ului vine cu o animație bine executată. Dacă căutați bibliotecile potrivite pentru a adăuga efecte la proiectul dvs., aici am făcut o listă a unora dintre bibliotecile care puteți utiliza pentru a da efecte bazate pe evenimentul de defilare.

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

Defilați dezvăluiți

O bibliotecă care facilitează adăugarea animației scroll atât pentru web cât și pentru mobil. Aveți posibilitatea să setați relaxarea personalizată, rotațiile 3D, durata și mulți parametri mor la elementul pe care doriți să îl animați.

dependenţe: nici unul | Mărimea: 2,9kb | 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 fereastra de vizualizare.

dependenţe: jQuery | Mărimea: 1kb | Licență: N / A

Fade Into View

Un plugin care adaugă efectul de estompare / ieșire la elemente când intră sau iese din ferestrele de vizualizare predeterminate.

dependenţe: jQuery | Mărimea: 3.81kb | Licență: N / A

WOW

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

dependenţe: Animate.css | Mărimea: 8.23kb | 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 schimbarea clasei CSS, toate bazate pe poziția de defilare. ScrollMagic poate lucra împreună cu GSAP și VelocityJS în crearea unei scene de animație. Vedeți demo-urile complete aici.

dependenţe: jQuery, GSAP, Velocity.js | Mărimea: 16,9kb | Licență: MIT

jScrollability

jScrollabilitatea vă permite să creați pagini Web unice cu animații complexe de derulare. După srolul utilizatorului, elementul se va anima în funcție de pozițiile de defilare. Animațiile rulează pe baza adâncimii de derulare și, bineînțeles, puteți seta începutul și sfârșitul animației.

dependenţe: jQuery | Mărimea: 1.86kb | Licență: MIT

pushIn.js

O bibliotecă simplă pentru a adăuga efectul dolly-in sau push-in la orice element care funcționează când un utilizator navighează prin pagină. Este ușor de implementat: adăugați doar parametrii de pornire, oprire și viteză Date-params la elementul HTML.

dependenţe: nici unul | Mărimea: 4.94kb | Licență: N / A

Scrollissimo

Aceasta este o bibliotecă JS pentru a adăuga animații netede cu parcurgere. Folosește tweens-urile și liniile de timp ale lui Greensock pentru a genera animații mai blânde.

dependenţe: GreenShock TweenLite / TweenMax | Mărimea: 2.94kb | Licență: N / A

jQuery Plugin de derulare animație

Acesta este un plugin jQuery pentru a adăuga animație cu afișare de tip Viewport folosind Greensock. Este ușor de animat elemente cu relaxare, transformare, scalare, rotație și animații 3D.

dependenţe: jQuery, GreenShock | Mărimea: 14 kb | Licență: GNU GPL

Circlr

Circlr vă permite să creați animația de rotație unui element, declanșat de defilare, evenimente de mouse sau evenimente de atingere. Este perfect pentru a face o vitrină a unui produs care poate fi vizualizat de la toate 360 ​​de grade, activat de parcurgerea de către utilizator.

dependenţe: nici unul | Mărimea: 6.05kb | Licență: MIT

Scrollimator

Scrollimator vă va arăta poziția și progresul derulării și veți reveni la valorile pe care le puteți utiliza pentru a schimba animațiile tween atașate la comportamentul de defilare al utilizatorului. Susține derularea verticală și orizontală.

dependenţe: nici unul | Mărimea: 37.7kb | Licență: N / A

crossfade

Crossfade este un plugin pentru a adăuga efectul crossfade unei imagini. Efectul neclar va continua pe măsură ce un utilizator scroll mai jos.

dependenţe: jQuery | Mărimea: 3.19kb | Licență: MIT

Efectul derulării paginii

Aceasta este o bibliotecă pentru efecte de derulare a paginilor experimentale create de CodyHouse. Folosește velocitey.js animații.

dependenţe: jQuery, Velocity.js | Mărimea: 17,6kb | Licență: N / A

jquery.parallax-scroll

Această bibliotecă vă permite să adăugați un efect de parallax neted pentru derularea paginii verticale. Doar importați jQuery și jquery.easing.1.3.js, apoi adăugați „Paralaxa-date“ atributul și parametrii opționali ai elementului dvs. pentru a personaliza efectul.

dependenţe: jQuery, jQuery.easing | Mărimea: 8.72kb | Licență: GNU GPL

parallax.js

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

dependenţe: jQuery | Mărimea: 6,63kb | Licență: MIT

Enllax

Enllax este o bibliotecă foarte ușoară, utilizată pentru aplicarea efectului de parallax asupra oricărui element de defilare. Puteți seta elemente de fundal sau elemente primare în efectul hav ethis. Funcționează atât pentru defilarea verticală, cât și pentru cea orizontală.

dependenţe: jQuery | Mărimea: 1,53kb | Licență: MIT

Blur pe defilare

Această bibliotecă vă ajută să adăugați efectul de estompare unei imagini, care va fi declanșată de derularea paginilor. Cu cât defilați mai mult în jos pe pagină, cu atât este mai necunoscut imaginea.

dependenţe: nici unul | Mărimea: 1.1kb | Licență: N / A

boxLoader

boxLoader este un plugin simplu pentru încărcarea elementelor în timpul derulării paginilor. Parametrul pe care trebuie să îl setați sunt direcțiile (x sau y), poziția pe procent, efect și, de asemenea, durata.

dependenţe: jQuery | Mărimea: 3.42kb | Licență: N / A

Pagina derulată înclinată

Pe măsură ce un utilizator navighează printr-o pagină, acest plugin va dezvălui un efect 3D înclinat incredibil asupra elementului pe care l-ați configurat.

dependenţe: jQuery | Mărimea: 1,5kb | Licență: GNU GPL

AhRelax

AhRelax oferă o modalitate de a realiza animații rapide de tip scroll. Are o greutate redusă și are, de asemenea, performanțe excelente. Puteți citi mai multe despre el aici.

dependenţe: jQuery | Mărimea: 1.6kb | Licență: MIT

Fancy Scroll

Dacă vedeți vreodată efectul de defilare de tip overflow 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 sărire, fie o strălucire, atunci când un utilizator ajunge în partea de sus / de jos a paginii.

dependenţe: jQuery | Mărimea: 2.64kb | Licență: GNU GPL

Imaginea Parallax defilați

Acest plugin va face ca elementele să plutească și să se miște în timp ce un utilizator scroll în jos sau în sus.

dependenţe: jQuery | Mărimea: 8,69kb | Licență: MIT

Rlsmooth

Acesta este un plugin mic pentru a crea efectul curge când un utilizator scolii în jos sau în sus pagina. Există trei efecte disponibile: glisați, decolorați și afișați.

dependenţe: jQuery | Mărimea: 1,95kb | Licență: MIT

Scrollme

Adaugă efecte simple în derularea paginilor, cum ar fi scala, rotirea, traducerea și modificarea opacității elementelor. Este ușor de configurat: trebuie doar să importați jQuery, acest plugin și să setați parametrii de animație pe marcajul elementului.

dependenţe: jQuery | Mărimea: 5.45kb | Licență: N / A

Parallax ImageScroll

Acest plugin vă permite să acordați un efect de parallax oricărei imagini pe pagina dvs. Folosește CSS3 Transform pentru a face efectul să funcționeze. Acest plugin are suport pentru jQuery și AMD.

dependenţe: jQuery | Mărimea: 8.01kb | Licență: MIT