Dolga drsna mesta so postala resnično običajen trend spletnega oblikovanja. Ena izmed najbolj kul podtipov tega so paralakse drsna mesta, kjer se slike premikajo, da oddajajo paralaksni učinek. Ko se uporabnik pomakne navzdol po strani, se animacije sprožijo in na splošno daje svež videz in občutek kateri koli spletni strani, če se pravilno izvaja.
Izdelava paralakse drsnega spletnega mesta je pogosto dolgočasna, ker zahteva poglobljeno poznavanje CSS, Javascript in dobrega spletnega oblikovanja. Tukaj je seznam najboljših pluginov za pomikanje paralakse, ki vam ne omogočajo le ustvarjanja paralakse, temveč imajo tudi dobro opremljeno knjižnico učinkov paralakse, tako da vam postane lažje in hitreje razviti dobro videti spletno stran. .
OPOZORILO : Preden začnete, upoštevajte, da je za uporabo teh vtičnikov potrebno poznavanje spletnih tehnologij (HTML / CSS / Javascript). Večina naštetih vtičnikov uporablja jquery, zato je morda potrebno tudi znanje o Jqueryju.
Paralaksni pomikalni dodatki
1. ScrollMagic
ScrollMagic je eden izmed najbolj priljubljenih in bogato opremljenih vtičnikov. To je knjižnica javascript, ki vam omogoča ustvarjanje navideznih čarobnih učinkov zvitka. Z uporabo ScrollMagic lahko animirate glede na vaš položaj drsenja. To pomeni, da lahko popravite, premaknete ali animirate elemente HTML, ko se pomikate, ne glede na trajanje, ki ga želite, in tudi preprosto dodate učinke paralakse na vaše spletno mesto. To je zelo prilagodljiv in je tudi lahek (6kb, ko gzipped). Med drugimi paralaksnimi vtičniki za pomikanje Scroll Magic ima najboljšo dokumentacijo in zunanje vire. To je popolnoma združljiv z mobilnimi preveč.
ScrollMagic ima veliko naštetih primerov. Oglejte si jih za navdih in navodila za uporabo te knjižnice.
O:
Domača stran: //janpaepke.github.io/ScrollMagic/
Ustvaril: Jan Paepke
Namestitev:
1. CDN:
2. Prenos iz Githuba
2. skrollr
skrollr je lahka čista Javascript in CSS knjižnica, v katero ne sodeluje jQuery. To je v bistvu "Scroll Magic poenostavljen za CSS". Če želite uporabljati skrollr, vam ni treba poznati Javascripta ali katerega koli jQuery. Samo HTML in CSS je dovolj. skrollr uporablja atribute podatkov za animacijo katerega koli želenega elementa HTML. Ena od glavnih slabosti skrollr-ja je, da animacije delujejo le, ko se stran pomika. V nasprotnem primeru se vsi učinki zadržijo. skrollr vam omogoča animirati vse lastnosti CSS elementov HTML.
O:
Domača stran: //prinzhorn.github.io/skrollr/
Ustvaril: Prinzhorn
Namestitev: Prenesite iz Githuba
3. pagePiling.js 
Page Piling je vtičnik jQuery, ki vam omogoča ustvarjanje vaše spletne strani v različne dele, ki se kopičijo na vrhu drug drugega. Po pomikanju ali dostopu do URL-ja se vsak del razkrije v čedni drsni animaciji. pagePiling.js je združljiv z vsemi platformami - namiznimi, tabličnimi in mobilnimi - in deluje z večino brskalnikov. Razdira se na starejših brskalnikih, ki ne podpirajo njegovih animacij (npr. IE 7). Če želite uporabiti vtičnik, morate v HTML vključiti CSS in datoteko Javascript. pagePiling.js je inicializirana s funkcijo (document) .ready:
$( document ).ready( function () {
$( ' #pagepiling ' ).pagepiling();
});
Za naprednejše inicializacije glejte README.md.
O:
Domača stran: //alvarotrigo.com/pagePiling/
Ustvaril: alvarotrigo
Namestitev: Prenesite iz Githuba
4. Alton
Alton je jQuery 'scroll-jacking' nam plugin. Premikanje z drsenjem pomeni, da je naravni drsnik vašega brskalnika onemogočen v korist ciljnega pomikanja, ki vas, ko ga sprožite (s kolescem miške ali sledilno ploščico), popelje na naslednjo navpično točko na zaslonu ali na vrh naslednjega vsebnika.
Alton omogoča tri ločene funkcionalnosti, imenovane "Hero", "Bookend" in "Standard". Standard vam omogoča uporabo polnega pomikanja strani, pri čemer je vsak razdelek 100% višji. Drsenje prinaša naslednji del ali prejšnji del. Bookend vam omogoča, da ustvarite izkušnjo, ki je primerna za bookende, medtem ko vam Hero omogoča, da se premikate z jackom le v razdelku »Hero«, preostali del strani pa ima (ponovno omogočeno) domače pomikanje.
O:
Domača stran: //paper-leaf.com/alton-jquery-scroll-jacking-plugin/
Ustvaril: paper-leaf
Namestitev: Prenesite iz Githuba
5. Stellar.js
Stellar je vtičnik jQuery, s katerim lahko enostavno dodate učinke pomikanja paralakse. Za zagon morate najprej zagnati funkcijo $ .stellar (). Nastavitve animacije za posamezne elemente lahko konfigurirate z uporabo podatkovnih atributov na tem elementu.
Zvezdno celo omogoča, da imate paralakse ozadja, ki so ozadja, ki se premikajo na pomik. Ena izmed najbolj uporabnih funkcij Stellar.js je kompenzacija.
Vsi elementi se bodo vrnili na prvotno pozicijo, ko bo njihov offset staršev ustreza robu zaslona - plus ali minus vaš lasten neobvezni offset. To vam omogoča, da ustvarite zapletene vzorce paralakse zelo enostavno. (Stellar Documentation)
O:
Domača stran: //markdalgleish.com/projects/stellar.js/
Ustvaril: Mark Dalgeish
Namestitev: Prenesite iz Githuba
6. multiScroll.js
Ta vtičnik je ustvaril isti razvijalec (alvarotrigo), ki je ustvaril vtičnik pagePiling.js. Kaj je v bistvu multi scroll, je, da vam omogoča ustvarjanje učinka, pri katerem se vsak odsek strani obremeni v dveh razdeljenih delih, ki zdrsnejo na mesto, ko se stran naloži. Oglejte si domačo stran, da vidite, kako to izgleda v vašem brskalniku. multiScroll.js vam omogoča nastavitev hitrosti pomikanja, popuščanja, možnosti pomikanja s tipkovnice in še veliko več lastnosti, tako da lahko prilagodite učinek natanko tako, kot je potrebno.
O:
Domača stran: //alvarotrigo.com/multiScroll/
Ustvaril: alvarotrigo
Namestitev: Prenesite iz Githuba
7. ScrollMe
ScrollMe je vtičnik za dodajanje preprostih učinkov paralakse na vašo stran. Ko se pomaknete navzdol, lahko raztegne, obrne, prevede in spremeni motnost elementov na strani. ScrollMe ne potrebuje Javascripta in dovolj je le znanja CSS. Z dodajanjem razreda "animateme" in zahtevanih podatkovnih atributov lahko animirate kateri koli element HTML. ScrollMe je najbolje uporabiti za dodajanje CSS učinkov. Je lahek in vse animacije so gladke, dokler jih uporabljate v zmernih količinah.
O:
Domača stran: //scrollme.nckprsn.com/
Ustvaril: Nick Pearson
Namestitev: Prenesite iz Githuba
8. Pomik po paralaksi
Parallax Scroll je enostaven za uporabo jQuery plugin, ki vam omogoča, da ustvarite učinek drsenja slike paralakse na straneh, kot je Spotify. Preprosto ga je uporabiti - samo določite zahtevane razrede CSS za imetnike slik. Namesto uporabe Če želite uporabiti ta vtičnik, morate uporabiti elemente, ki imajo podano sliko ozadja (z lastnostjo CSS,, background-image``. Elemente lahko prilagodite z uporabo poizvedb CSS @media.
O:
Domača stran: //parallax-scroll.aenism.com/
Ustvaril: Aen
Namestitev: Prenesite iz Githuba
9. Jarallax
Jarallax je knjižnica CSS in Javascript, ki je specializirana za učinke paralakse. Jarallax je konfiguriran z uporabo Javascripta (No jQuery, samo čista vanilija JS). Podpira gladke funkcije drsenja, lajšanje in animacijo paralakse. Jarallax podpira večina brskalnikov, med različnimi platformami. Spletna stran Jarallax ima odlično dokumentacijo o tem, kako prilagoditi Jarallax za vaše potrebe. Jarallax ima tudi video vadnice, ki prikazujejo, kako namestiti Jarallax za vašo spletno stran in kako začeti.
O:
Domača stran: //www.jarallax.com/
Ustvaril: Jarallax
Namestitev: Prenesite s spletne strani Jarallax
10. Superskrollorama
Superscrollorama je vtičnik na osnovi jQuery, ki podpira animacije za drsenje. Poganja ga TweenMax in Greensock Tweening Engine, ki poveča zmogljivost animacije in gladkost. Animacije Superscrollorama se kličejo preko jQuery in lahko uporabite tudi večino funkcij TweenMax.js. Žal te animacije niso popolnoma podprte z mobilnimi napravami (ker naprave z zaslonom na dotik ravnajo z drsenjem na drugačen način). Vendar pa lahko z uporabo metode setScrollContainerOffset dostopate do učinkov Superscrollorama na mobilnih napravah.
Tukaj je koda za to:
.setScrollContainerOffset(x, y)
(x: odmik x vsebnika za pomikanje, y: odmik x vsebnika drsenja)
O:
Domača stran: //johnpolacek.github.io/superscrollorama/
Ustvaril: johnpolacek
Namestitev: Prenesite iz Githuba
GLEJ TUDI: 10 najboljših statičnih generatorjev mest
