Knižnice JavaScript pre efektívne rolovanie

Návrh webových stránok ožíva s dobre vykonanou animáciou. Ak hľadáte správne knižnice na pridanie efektov do vášho projektu, tu som vytvoril zoznam niektorých knižníc, môžete použiť na poskytnutie efektov na základe scroll udalosti.

Keď používateľ posunie svoju webovú stránku nadol, akciu môžu byť navrhnuté tak, aby spustili rôzne možnosti animácie ako sú fade efekty, rozmazanie, 3D, paralaxy a ďalšie. Existuje tu 25 knižníc JS, ktoré vám pomôžu dosiahnuť takýto druh reakcie vo vašom dizajne.

Posúvanie odhalenie

Knižnica, ktorá uľahčuje pridanie animácie scroll pre webové i mobilné zariadenia. Môžete nastaviť vlastné uvoľňovanie, rotácie 3D, trvanie a mnoho parametrov morovej dĺžky na prvok, ktorý chcete animovať.

závislosti: žiadny rozmery: 2,9kb | licencie: MIT

Aniview

Plugin, ktorý spolupracuje s Animate.CSS, umožňuje animácie iba vtedy, keď sa váš prvok dostane do výrezu.

závislosti: jQuery | rozmery: 1kb | licencie: N / A

Fade Into View

Zásuvný modul, ktorý pridáva účinok vyblednutia / vyblednutia prvkom pri vstupe alebo výstupe z preddefinovaných výrezov.

závislosti: jQuery | rozmery: 3,81kb | licencie: N / A

WOW

Aplikácia WOW odhalí animácie Animate.css po rolovaní. Môžete nastaviť trvanie animácie, oneskorenia, posuny a iterácie hneď od značky HTML, potom stačí zavolať triedy prvkov z JS.

závislosti: Animate.css | rozmery: 8.23kb | licencie: MIT

ScrollMagic

Tento plugin zobrazí "Magický" efekt, keď používateľ posunie stránku. Je ideálny pre animáciu, pripevnenie prvku alebo prepínanie medzi triedou CSS, všetko založené na pozícii posúvania. ScrollMagic dokáže spolupracovať s nástrojmi GSAP a VelocityJS pri vytváraní scény animácie. Pozrite si kompletnú ukážku tu.

závislosti: jQuery, GSAP, Velocity.js | rozmery: 16,9kb | licencie: MIT

jScrollability

Funkcia jScrollability umožňuje vytvárať jednotlivé webové stránky so zložitými animáciami založenými na posúvaní. Pri zozname používateľov sa prvok bude animovať na základe posunutých pozícií. Animácie prebiehajú na základe hĺbky posúvania a samozrejme môžete nastaviť začiatok a koniec animácie.

závislosti: jQuery | rozmery: 1,86kb | licencie: MIT

pushIn.js

Jednoduchá knižnica na pridanie efektu doll-in alebo push-in do akéhokoľvek prvku, ktorý funguje, keď používateľ posúva stránku. Je jednoduché implementovať: stačí pridať parametre štart, stop a rýchlosť Data-params k vášmu prvku HTML.

závislosti: nikto | rozmery: 4,94kb | licencie: N / A

Scrollissimo

Toto je knižnica JS, ktorá pridáva hladké animácie s riadeným rolovaním. Využíva tlmočníkov a časové rady spoločnosti Greensock na vytvorenie hladších animácií.

závislosti: GreenShock TweenLite / TweenMax | rozmery: 2,94kb | licencie: N / A

jQuery animácia Scroll Plugin

Toto je doplnok jQuery na pridanie animácie vyvolanej zobrazením pomocou programu Greensock. Umožňuje jednoducho animovať prvky s uvoľnením, transformáciou, meraním, rotáciou a 3D animáciami.

závislosti: jQuery, GreenShock | rozmery: 14 kb | licencie: GNU GPL

Circlr

Circlr vám umožňuje vytvoriť rotačnú animáciu na prvok, ktorý sa aktivuje posúvaním, udalosťami myši alebo udalosťami dotyku. Je to ideálne, aby ste vytvorili prehliadku produktu, ktorú si môžete pozrieť zo všetkých 360 stupňov.

závislosti: nikto | rozmery: 6.05kb | licencie: MIT

Scrollimator

Scrollimator vám ukáže priebeh posunu a posunu a vráti hodnoty, ktoré môžete použiť na zmenu doplnkových animácií pripojených k správaniu rolovania používateľov. Podporuje vertikálne a horizontálne rolovanie.

závislosti: nikto | rozmery: 37,7kb | licencie: N / A

Crossfade

Crossfade je doplnok, ktorý pridáva efekt crossfade na obrázok. Rozmazaný efekt bude pokračovať, keď sa používateľ posúva ďalej.

závislosti: jQuery | rozmery: 3.19kb | licencie: MIT

Scroll Effect

Jedná sa o knižnicu experimentálnych scrollových efektov vytvorených spoločnosťou CodyHouse. Využíva velocitey.js animácie.

závislosti: jQuery, Velocity.js | rozmery: 17,6kb | licencie: N / A

jquery.parallax-scroll

Táto knižnica vám umožňuje pridávať hladký efekt paralaxy na vertikálne posúvanie stránky. Stačí importovať jQuery a jquery.easing.1.3.js a potom pridať 'Data-paralaxa' atribút a voliteľné patamety k vášmu prvku prispôsobiť efekt.

závislosti: jQuery, jQuery.easing | rozmery: 8,72kb | licencie: GNU GPL

parallax.js

Parallax.js je jednoduchý doplnok, ktorý pridáva efekt scrollingu paralaxy inšpirovaný webovou lokalitou Spotify.

závislosti: jQuery | rozmery: 6,63kb | licencie: MIT

Enllax

Enllax je veľmi ľahká knižnica na použitie pri aplikácii paralaxového efektu na ľubovoľný rolovací prvok. Môžete nastaviť prvky pozadia alebo popredia na efekt hav ethis. Pracuje pre vertikálne i horizontálne rolovanie.

závislosti: jQuery | rozmery: 1,53kb | licencie: MIT

Blur na posúvaní

Táto knižnica vám pomôže pridať efekt rozostrenia na obrázok, ktorý sa vyvolá posúvaním stránky. Čím hlbšie sa posúvate nadol po stránke, tým je rozmazaný obraz.

závislosti: nikto | rozmery: 1.1kb | licencie: N / A

boxLoader

boxLoader je jednoduchý doplnok na načítanie prvkov pri posúvaní stránky. Parameter, ktorý by ste mali nastaviť, sú smery (x alebo y), poloha na percentách, efekte a tiež trvanie.

závislosti: jQuery | rozmery: 3,42 kb licencie: N / A

Presunutím naklonenej stránky

Ako používateľ prechádza cez stránku, tento plugin odhalí úžasný 3D naklonený efekt k nastavenému prvku.

závislosti: jQuery | rozmery: 1,5 kb | licencie: GNU GPL

AhRelax

AhRelax poskytuje spôsob, ako vytvoriť animácie založené na rýchlom posúvaní. Je to ľahká a má skvelý výkon. Tu si môžete prečítať viac.

závislosti: jQuery | rozmery: 1,6 kb licencie: MIT

Fancy Scroll

Ak ste niekedy v systéme Android alebo iOS zaznamenali efekt rolovania pri pretečení, tento plugin teraz môžete použiť na svoje stránky. Ak používateľ dosiahne hornú alebo dolnú časť stránky, môžete pridať animáciu, či už odskočiť alebo žiariť.

závislosti: jQuery | rozmery: 2,64kb | licencie: GNU GPL

Parallax image scroll

Tento doplnok bude robiť prvky plávať a pohybovať sa, keď sa používateľ posúva smerom dolu alebo nahor.

závislosti: jQuery | rozmery: 8.69kb | licencie: MIT

Rlsmooth

Toto je malý doplnok na vytvorenie tečúceho efektu, keď používateľ skolí nadol alebo nahor stránku. K dispozícii sú tri efekty: posúvanie, vyblednutie a zobrazenie.

závislosti: jQuery | rozmery: 1,95kb | licencie: MIT

scroll

Pridáva jednoduché efekty na posúvanie stránok, ako sú stupnice, otáčanie, prekladanie a zmena opacity prvkov. Je jednoduché nastaviť: stačí importovať jQuery, tento plugin a nastaviť parametre animácie na značku prvku.

závislosti: jQuery | rozmery: 5.45kb | licencie: N / A

Parallax ImageScroll

Tento plugin vám umožní dať efekt paralaxy na akýkoľvek obrázok na vašej stránke. Využíva CSS3 Transform, aby efekt fungoval. Tento plugin má podporu pre jQuery a AMD.

závislosti: jQuery | rozmery: 8,01kb | licencie: MIT