JavaScript knjižnice za učinke kul drsenja
Oblikovanje spletne strani oživi z dobro izvedeno animacijo. Če iščete ustrezne knjižnice za dodajanje učinkov svojemu projektu, sem naredil seznam nekaterih knjižnic, ki lahko uporabite za prikaz učinkov na podlagi dogodka drsenja.
Ko uporabnik drsi po vaši spletni strani, dejanje lahko ustvarite različne možnosti animacije kot so učinki zbledelosti, zamegljenost, 3D, paralaksa in še več. Tukaj je 25 knjižnic JS, ki vam lahko pomagajo doseči takšen odziv v oblikovanju vašega spletnega mesta.
Pomaknite se Pokaži
Knjižnica, ki olajša dodajanje animacije za drsenje tako za splet, kot za mobilne naprave. Nastavite lahko poenostavitev po meri, rotacije 3D, trajanje in mnoge parametre morja na element, ki ga želite animirati.
Odvisnosti: nobena | Velikost: 2.9kb | Licenca: MIT
Aniview
Vtičnik, ki deluje skupaj s programom Animate.CSS, da omogoči animacije samo, ko pride element v pogled.
Odvisnosti: jQuery | Velikost: 1kb | Licenca: N / A
Fade Into View
Vtičnik, ki doda učinek pojemanja / izločanja elementom, ko vstopajo ali izstopajo iz vnaprej določenih prikaznih polj.
Odvisnosti: jQuery | Velikost: 3.81kb | Licenca: N / A
WOW
WOW razkrije animacije Animate.css po dogodku drsenja. Trajanje animacije, zakasnitve, premike in iteracije lahko nastavite neposredno iz oznake HTML, nato pa preprosto pokličete razred elementa iz JS.
Odvisnosti: Animate.css | Velikost: 8.23kb | Licenca: MIT
ScrollMagic
Ta vtičnik bo prikazal »Čarobni« učinek, ko uporabnik drsi po strani. Odličen je za animacijo, pripenjanje elementa ali preklapljanje CSS razreda, vse pa temelji na položaju drsenja. ScrollMagic lahko sodeluje z GSAP in VelocityJS pri ustvarjanju animacijske scene. Oglejte si celotne predstavitve tukaj.
Odvisnosti: jQuery, GSAP, Velocity.js | Velikost: 16,9 kb | Licenca: MIT
jScrollability
jScrollability omogoča ustvarjanje posameznih spletnih strani s kompleksnimi animacijami, ki temeljijo na pomikanju. Po uporabniku se bo element animiral glede na položaje pomikanja. Animacije potekajo glede na globino pomikanja in seveda lahko nastavite začetek in konec animacije.
Odvisnosti: jQuery | Velikost: 1.86kb | Licenca: MIT
pushIn.js
Preprosta knjižnica za dodajanje dolly-in ali push-in efekta na vsak element, ki deluje, ko se uporabnik pomika po strani. Enostavna izvedba: dodajte samo začetne, zaustavitvene in hitrostne parametre podatkovni parametri do elementa HTML.
Odvisnosti: nobena | Velikost: 4.94kb | Licenca: N / A
Scrollissimo
To je knjižnica JS za dodajanje gladko nadzorovanih animacij. Uporablja Greensock's tweens in roke za ustvarjanje bolj gladko animacije.
Odvisnosti: GreenShock TweenLite / TweenMax | Velikost: 2.94kb | Licenca: N / A
jQuery Plugin za pomikanje animacije
To je vtičnik jQuery za dodajanje animacije, ki jo aktivira pogled, s pomočjo aplikacije Greensock. Omogoča preprosto animiranje elementov s popuščanjem, preoblikovanjem, merjenjem, rotacijo in 3D animacijami.
Odvisnosti: jQuery, GreenShock | Velikost: 14kb | Licenca: GNU GPL
Circlr
Circlr vam omogoča, da ustvarite animacijo vrtenja za element, ki se sproži s pomikanjem, dogodki z miško ali dogodki na dotik. Odličen je za predstavitev izdelka, ki si ga lahko ogledate iz vseh 360 stopinj, ki ga aktivira uporabnikovo pomikanje.
Odvisnosti: nobena | Velikost: 6.05kb | Licenca: MIT
Scrollimator
Scrollimator vam bo pokazal položaj in pomikanje napredka ter vrnil vrednosti, ki jih lahko uporabite za spreminjanje animacij, ki so povezane z uporabnikom. Podpira vertikalno in horizontalno drsenje.
Odvisnosti: nobena | Velikost: 37,7kb | Licenca: N / A
Crossfade
Crossfade je plugin, ki sliki doda učinek navzkrižnega prelivanja. Nejasen učinek se bo nadaljeval, ko se uporabnik pomakne navzdol.
Odvisnosti: jQuery | Velikost: 3.19kb | Licenca: MIT
Učinek drsenja strani
Ta je knjižnica za eksperimentalne učinke, ki jih je ustvaril CodyHouse. Uporablja velocitey.js animacije.
Odvisnosti: jQuery, Velocity.js | Velikost: 17.6kb | Licenca: N / A
jquery.parallax-scroll
Ta knjižnica vam omogoča dodajanje gladkega paralakse učinka na navpično drsenje strani. Samo uvozite jQuery in jquery.easing.1.3.js, nato dodajte "podatkovna paralaksa" atribut in neobvezni patametri za vaš element, da prilagodite učinek.
Odvisnosti: jQuery, jQuery.easing | Velikost: 8,72kb | Licenca: GNU GPL
parallax.js
Parallax.js je preprost vtičnik, ki dodaja učinek pomikanja paralakse, ki ga navdihuje spletna stran Spotify.
Odvisnosti: jQuery | Velikost: 6.63kb | Licenca: MIT
Enllax
Enllax je super lahka knjižnica za uporabo pri uporabi paralaksnega učinka za vse elemente, ki se premikajo. Nastavite lahko ozadje ali elemente v ospredju, ki imajo etični učinek. Deluje tako za vertikalno kot za horizontalno pomikanje.
Odvisnosti: jQuery | Velikost: 1.53kb | Licenca: MIT
Razmazite se na drsniku
Ta knjižnica vam pomaga dodati učinek zameglitve sliki, ki jo sproži drsenje po straneh. Čim globlje se pomikate po strani, tem bolj postane zamegljena slika.
Odvisnosti: nobena | Velikost: 1.1kb | Licenca: N / A
boxLoader
boxLoader je preprost vtičnik za nalaganje elementov pri pomikanju po strani. Parameter, ki ga morate nastaviti, sta smeri (x ali y), položaj na odstotkih, učinek in trajanje.
Odvisnosti: jQuery | Velikost: 3.42kb | Licenca: N / A
Nagibanje po strani
Ko se uporabnik pomika skozi stran, bo ta vstavek razkril osupljiv 3D-učinek elementu, ki ga nastavite.
Odvisnosti: jQuery | Velikost: 1,5kb | Licenca: GNU GPL
AhRelax
AhRelax ponuja način za hitre pomikanje na osnovi animacij. Je lahka in ima tudi odlične zmogljivosti. Več o tem si lahko preberete tukaj.
Odvisnosti: jQuery | Velikost: 1,6kb | Licenca: MIT
Fancy Scroll
Če ste kdaj videli učinek drsenja na Android ali iOS, lahko s tem vtičnikom to zdaj uporabite na svojem spletnem mestu. Dodate lahko animacijo, bodisi bounce ali glow, ko uporabnik doseže vrh / dno strani.
Odvisnosti: jQuery | Velikost: 2.64kb | Licenca: GNU GPL
Pomik slike paralakse
Ta vtičnik bo elemente spreminjal, ko se uporabnik pomika navzdol ali navzgor po strani.
Odvisnosti: jQuery | Velikost: 8,69kb | Licenca: MIT
Rlsmooth
To je majhen vtičnik, ki ustvarja pretočni učinek, ko uporabnik pomakne stran navzgor ali navzdol. Na voljo so trije učinki: slide, fade in show.
Odvisnosti: jQuery | Velikost: 1.95kb | Licenca: MIT
Scrollme
Dodaja preproste učinke na drsenje strani, kot je merilo, vrtenje, prevajanje in spreminjanje nepreglednosti elementov. Preprosto je nastaviti: samo uvozite jQuery, ta vtičnik in nastavite parametre animacije na oznaki elementa.
Odvisnosti: jQuery | Velikost: 5.45kb | Licenca: N / A
Paralaksa ImageScroll
Ta vtičnik vam omogoča, da vsaka slika na vaši strani ustvari učinek paralakse. Uporabi CSS3 Transform, da bo učinek deloval. Ta vtičnik podpira jQuery in AMD.
Odvisnosti: jQuery | Velikost: 8,01kb | Licenca: MIT
