Pitkät vierityspaikat ovat tulleet todella yleisiksi web-suunnittelusuunniksi. Yksi tämän tyylikkäimmistä alatyypeistä on parallaxin vierityspaikat, joissa kuvat liikkuvat antamaan parallaksivaikutuksen. Kun käyttäjä vierittää sivua alaspäin, animaatiot laukaistaan pois päältä ja yleisesti se antaa tuoreen ulkoasun kaikille verkkosivuille, jos ne toteutetaan oikein.
Parallaksin vierityspaikan tekeminen on usein tylsiä, koska se vaatii perusteellista tietoa CSS: stä, Javascriptistä ja hyvästä web-suunnittelusta. Tässä on luettelo parhaista parallaxin vierityspistokkeista, jotka eivät ainoastaan helpota parallaksin vierityspaikkojen luomista, vaan niillä on myös hyvin varustetut parallaksivaikutusten kirjasto, jotta helpompaa ja nopeampaa kehittää hyvännäköinen web-sivu .
VASTUUVAPAUS : Ennen kuin aloitat, huomaa, että näiden pluginien käyttöön tarvitaan joitakin web-teknologioiden tuntemusta (HTML / CSS / Javascript). Useimmat luetelluista laajennuksista käyttävät jqueryä, joten myös Jqueryn tuntemus voi olla tarpeen.
Parallaxin vierityspistokkeet
1. ScrollMagic
ScrollMagic on yksi suosituimmista ja monipuolisimmista jquery-laajennuksista. Se on javascript-kirjasto, jonka avulla voit luoda näennäisesti maagisia vieritystehosteita. ScrollMagicin avulla voit animoida vierityspisteen perusteella. Tämä tarkoittaa, että voit korjata, siirtää tai animoida HTML-elementtejä, kun selaat, haluamallesi kestolle, ja myös helposti lisätä parallaksivaikutuksia sivustoosi. Se on hyvin muokattavissa ja se on myös kevyt (6kb, kun se on gzipattu). Muiden parallaksiraporttien joukossa Scroll Magic sisältää parhaat asiakirjat ja ulkoiset resurssit. Se on täysin yhteensopiva myös mobiililaitteiden kanssa.
ScrollMagicissa on paljon esimerkkejä. Tarkista ne inspiraatiota ja ohjeita tämän kirjaston käytöstä.
Noin:
Kotisivu: //janpaepke.github.io/ScrollMagic/
Perustaja: Jan Paepke
Asennus:
1. CDN:
2. Lataa Githubista
2. skrollr
skrollr on kevyt puhdas Javascript- ja CSS-kirjasto, johon ei liity jQueryä. Se on pohjimmiltaan "Scroll Magic yksinkertaistettu CSS: lle". Jos haluat käyttää skrollr-ohjelmaa, sinun ei tarvitse tietää Javascriptiä tai jQueryä. Vain HTML ja CSS riittää. skrollr käyttää tietomääritteitä animoimaan haluamasi HTML-elementin. Yksi skrollrin tärkeimmistä haitoista on se, että animaatiot toimivat vain sivun vierittämisen aikana. Muussa tapauksessa kaikki vaikutukset pidetään kiinni. skrollr avulla voit animoida kaikki HTML-elementtien CSS-ominaisuudet.
Noin:
Kotisivu: //prinzhorn.github.io/skrollr/
Luonut: Prinzhorn
Asennus: Lataa Githubista
3. pagePiling.js 
Page Piling on jQuery-laajennus, jonka avulla voit luoda sivustosi eri osiin, jotka kasaavat toistensa päälle. Kun selaat tai pääset URL-osoitteeseen, jokainen osio paljastuu siistissä liukuvassa animaatiossa. pagePiling.js on yhteensopiva kaikkien alustojen - työpöydän, tabletin ja mobiililaitteiden kanssa - ja toimii useimpien selainten kanssa. Se hajoaa sulavasti vanhemmilla selaimilla, jotka eivät tue sen animaatioita (kuten IE 7). Jos haluat käyttää laajennusta, sinun on sisällytettävä HTML-koodiin CSS ja Javascript-tiedosto. pagePiling.js alustetaan (asiakirja) -toiminnolla:
$( document ).ready( function () {
$( ' #pagepiling ' ).pagepiling();
});
Edistyneempien alustusten tekeminen tapahtuu README.md-ohjelman kautta.
Noin:
Kotisivu: //alvarotrigo.com/pagePiling/
Luonut: alvarotrigo
Asennus: Lataa Githubista
4. Alton
Alton on jQuery'n vierityspistoke meille. Vieritystoiminto tarkoittaa, että selaimesi natiivi vieritys on poistettu käytöstä kohdennetun selauksen puolesta, joka aloitetaan (hiiren pyörän tai kosketuslevyn avulla) seuraavalle pystysuoralle pisteelle tai seuraavan säiliön yläreunalle.
Alton sallii kolme erilaista toimintoa, nimeltään Hero, Bookend ja Standard. Standardin avulla voit käyttää koko sivun vieritystä, ja jokaisella osuudella on 100% korkeus. Selaus tuo esiin seuraavan osan tai edellisen osan. Bookendin avulla voit luoda bookend-kind kokemuksen, kun taas Hero-sovelluksen avulla voit selata vain Hero-osaa, ja loput sivusta löytyvät (uudelleen) natiivista vierittämisestä.
Noin:
Kotisivu: //paper-leaf.com/alton-jquery-scroll-jacking-plugin/
Luonut: paper-leaf
Asennus: Lataa Githubista
5. Stellar.js
Stellar on jQuery-laajennus, jonka avulla voit helposti lisätä parallaksirullauksen vaikutuksia. Voit suorittaa ensin $ .stellar () -toiminnon. Yksittäisten elementtien animaatioasetukset voidaan määrittää käyttämällä kyseisen elementin tietomääritteitä.
Tähdellä voit myös olla parallaksitaustoja, jotka ovat taustoja, jotka siirtyvät vieritykseen. Yksi Stellar.js: n hyödyllisimmistä ominaisuuksista on kompensoinnit.
Kaikki elementit palaavat alkuperäiseen paikoitukseensa, kun niiden siirtymä vanhempi täyttää näytön reunan - plus tai miinus oma valinnainen offset. Näin voit luoda monimutkaisia parallaksimalleja helposti. (Stellar-dokumentaatio)
Noin:
Kotisivu: //markdalgleish.com/projects/stellar.js/
Luonut: Mark Dalgeish
Asennus: Lataa Githubista
6. multiScroll.js
Tämän laajennuksen luo sama kehittäjä (alvarotrigo), joka teki PagePiling.js-laajennuksen. Mikä monikerroksinen periaatteessa on, sen avulla voit luoda vaikutuksen, jossa jokainen sivuosio latautuu kahteen jaettuun osaan, jotka liukuvat paikalleen sivun kuormina. Katso kotisivulta, mitä selaimesi näyttää. MultiScroll.js: n avulla voit määrittää vieritysprosessin, helpottaa, näppäimistön vieritysvaihtoehtoa ja monia muita ominaisuuksia, jotta voit mukauttaa vaikutusta siihen, miten tarvitset sitä.
Noin:
Kotisivu: //alvarotrigo.com/multiScroll/
Luonut: alvarotrigo
Asennus: Lataa Githubista
7. ScrollMe
ScrollMe on plugin, jolla voit lisätä sivulle yksinkertaisia parallaxin vieritystehosteita. Se voi skaalata, kiertää, kääntää ja muuttaa sivun elementtien läpinäkyvyyttä, kun selaat alas. ScrollMe ei vaadi Javascriptiä, ja vain CSS-tietämys riittää. Lisäämällä luokan “animateme” ja vaaditut tietomääritteet voit animoida minkä tahansa HTML-elementin. ScrollMeä käytetään parhaiten CSS-tehosteiden lisäämiseen. Se on kevyt ja kaikki animaatiot ovat sileitä, kunhan niitä käytetään maltillisesti.
Noin:
Kotisivu: //scrollme.nckprsn.com/
Luonut: Nick Pearson
Asennus: Lataa Githubista
8. Parallaksirulla
Parallax Scroll on helppokäyttöinen jQuery-laajennus, jonka avulla voit luoda parallaksikuvan vieritystehosteen, joka löytyy Spotify-sivustoista. Se on melko helppo käyttää - määritä vain halutut CSS-luokat kuvien haltijoille. Sen sijaan, että käytät tunnisteita, jotta käytät tätä pluginia, sinun on käytettävä elementtejä, joilla on taustakuva (käyttämällä "background-image" CSS -ominaisuutta. Voit tehdä elementit reagoiviksi CSS @media-kyselyillä.
Noin:
Kotisivu: //parallax-scroll.aenism.com/
Luonut: Aen
Asennus: Lataa Githubista
9. Jarallax
Jarallax on CSS- ja Javascript-kirjasto, joka on erikoistunut parallaxin vieritysvaikutuksiin. Jarallax on määritetty Javascriptin avulla (ei jQuery, vain puhdas vanilja JS). Se tukee tasoitettuja vieritysominaisuuksia, helpottaa ja parallaksia. Jarallaxia tukevat useimmat selaimet eri alustoilla. Jarallaxin verkkosivustolla on erinomaiset asiakirjat Jarallaxin mukauttamisesta tarpeisiisi. Jarallaxilla on myös video-opetusohjelmia, joissa näytetään, miten Jarallaxin asennus sivustollesi ja miten aloittaa.
Noin:
Kotisivu: //www.jarallax.com/
Luonut: Jarallax
Asennus: Lataa Jarallaxin verkkosivuilta
10. Superscrollorama
Superscrollorama on jQuery-pohjainen laajennus, joka tukee vierityselokuvioita. Sitä käyttävät TweenMax ja Greensock Tweening Engine, jotka lisäävät animaation suorituskykyä ja sileyttä. Superscrollorama-animaatioita kutsutaan jQueryn kautta, ja voit käyttää myös useimpia TweenMax.js-toimintoja. Valitettavasti mobiililaitteet eivät tue näitä animaatioita (koska kosketusnäyttölaitteet käsittelevät vierittämistä eri tavalla). Käyttämällä setScrollContainerOffset-menetelmää Superscrollorama-tehosteita voidaan kuitenkin käyttää mobiililaitteissa.
Tässä on koodi tätä varten:
.setScrollContainerOffset(x, y)
(x: vierityspaketin x poikkeama, y: vierityspaketin x offset)
Noin:
Kotisivu: //johnpolacek.github.io/superscrollorama/
Luonut: johnpolacek
Asennus: Lataa Githubista
KATSO MYÖS: 10 Best Static Site Generators
