Pikad kerimise saidid on muutunud tõeliselt levinud veebidisaini trendiks. Üks selle kõige lahedamatest alamtüüpidest on parallaaksi kerimise saidid, kus pildid liiguvad parallaksi efektiks. Kui kasutaja sirvib lehekülge alla, käivituvad animatsioonid välja ja üldjuhul annab see igale veebisaidile värske ilme ja korrektsuse.
Parallaksi kerimise saidi tegemine on sageli tüütu, sest see nõuab põhjalikke teadmisi CSS-ist, Javascriptist ja heast veebidisainist. Järgnevalt on toodud parimad parallaxide kerimispistikud, mis ei hõlma mitte ainult parallaksi kerimise saitide loomist, vaid ka parallaksi efekti raamatukogu, nii et teil on lihtsam ja kiirem luua hea välimusega veebileht .
VASTUVÕTMINE : Enne kui alustate, pange tähele, et nende pluginate kasutamiseks on vaja mõningaid teadmisi veebitehnoloogiatest (HTML / CSS / Javascript). Enamik loetletud pluginaid kasutavad jquery-d, seega võib vaja minna ka Jquery teadmisi.
Parallaaksi kerimise pluginad
1. ScrollMagic
ScrollMagic on üks populaarsemaid ja rikkalikumaid jquery pluginaid. See on javascript raamatukogu võimaldab teil luua näiliselt maagilisi kerimisefekte. ScrollMagic'i abil saate animeerida oma kerimispositsiooni põhjal. See tähendab, et saate HTML-elemente määrata, teisaldada või animeerida, kui soovid seda igat kestust sirvida, ja lisada ka parallaxiefektid oma veebisaidile. See on väga kohandatav ja ka kergekaaluline (6kb gzipeerimisel). Muude parallaaksi kerimise pluginate hulgas on Scroll Magic'il parim dokumentatsioon ja välised ressursid. See sobib ideaalselt mobiiliga.
ScrollMagicil on palju näiteid. Kontrollige neid inspiratsiooni ja juhiseid selle raamatukogu kasutamise kohta.
Teave:
Kodulehekülg: //janpaepke.github.io/ScrollMagic/
Loodud: Jan Paepke
Paigaldus:
1. CDN:
2. Laadi alla Githubist
2. skrollr
skrollr on kerge puhas Javascript ja CSS raamatukogu, kus puudub jQuery. Põhimõtteliselt on see CSS-ile lihtsustatud Scroll Magic. Skrollr'i kasutamiseks ei pea sa teadma Javascripti ega mingit jQuery-d. Piisab ainult HTML ja CSS. skrollr kasutab andmete atribuute mis tahes HTML-elemendi animeerimiseks. Skrollri üks peamisi puudusi on see, et animatsioonid toimivad ainult lehe kerimise ajal. Vastasel juhul paigutatakse kõik efektid ootele. skrollr võimaldab teil animeerida kõiki HTML-elementide CSS-omadusi.
Teave:
Koduleht: //prinzhorn.github.io/skrollr/
Loodud: Prinzhorn
Paigaldamine: Laadi alla Githubist
3. pagePiling.js 
Page Piling on jQuery plugin, mis võimaldab teil luua oma veebisaidi erinevatesse osadesse, mis üksteise peale üksteise peale koguvad. Kerimise või URL-i avamise järel ilmneb iga sektsioon ilusa libistava animatsiooniga. pagePiling.js on ühilduv kõigi platvormide - töölaua, tahvelarvuti ja mobiiliga - ning töötab enamiku brauseritega. See laguneb graatsiliselt vanematel brauseritel, mis ei toeta selle animatsioone (nt IE 7). Plugina kasutamiseks peate HTML-i sisse lisama CSS-i ja Javascript-faili. pagePiling.js lähtestatakse (dokumendi).
$( document ).ready( function () {
$( ' #pagepiling ' ).pagepiling();
});
Täiustatud algseadistuste jaoks läbige README.md.
Teave:
Kodulehekülg: //alvarotrigo.com/pagePiling/
Loodud: alvarotrigo
Paigaldamine: Laadi alla Githubist
4. Alton
Alton on plugin, mis on meile keritav. Kerimise nihutamine tähendab, et teie brauseri natiivne kerimine on keelatud sihitud sirvimise kasuks, mis käivitamisel (hiire ratta või puuteplaadi abil) viib teid järgmisele vertikaalsele punktile ekraanil või järgmise konteineri ülaosale.
Alton võimaldab kolme erinevat tüüpi funktsiooni, mida nimetatakse "Hero", "Bookend" ja "Standard". Standard võimaldab kasutada täislehe kerimist, kusjuures iga osa on 100% kõrgune. Kerimine toob välja järgmise osa või eelmise osa. Bookend võimaldab teil luua bookend-tüüpi kogemuse, samal ajal kui Hero võimaldab teil sirvida ainult "Hero" sektsiooni, ülejäänud leheküljel on (uuesti kasutatav) natiivne kerimine.
Teave:
Kodulehekülg: //paper-leaf.com/alton-jquery-scroll-jacking-plugin/
Loodud: paberileht
Paigaldamine: Laadi alla Githubist
5. Stellar.js
Stellar on jQuery plugin, mille abil saab hõlpsasti parallaksi kerimise efekte lisada. Et käivitada, peate esmalt käivitama funktsiooni $ .stellar (). Üksikute elementide animatsiooni seadeid saab konfigureerida selle elemendi andmete atribuutide abil.
Stellar võimaldab teil ka parallaksi taustaga, mis on taustal, mis liigub kerimisel. Üks Stellar.js'i kõige kasulikumaid funktsioone on kompenseerimine.
Kõik elemendid naasevad oma algsele positsioonile, kui nende nihutatud vanem vastab ekraani servale - pluss või miinus oma valikuline nihke. See võimaldab teil kergesti luua keerukaid parallaksimustreid. (Tähtedokumentatsioon)
Teave:
Koduleht: //markdalgleish.com/projects/stellar.js/
Loodud: Mark Dalgeish
Paigaldamine: Laadi alla Githubist
6. multiScroll.js
See plugin on loodud sama arendaja (alvarotrigo) poolt, kes tegi lehePiling.js plugina. Mitme kerimisega põhiolemus on see, mis võimaldab teil luua efekti, kus iga lehekülje osa laadib kaheks jagatud osaks, mis libistavad lehekülje koormustena. Vaadake kodulehte, et näha, mida see teie brauseris näeb. MultiScroll.js võimaldab teil määrata kerimise kiiruse, lihtsustamise, klaviatuuri kerimise ja paljude muude omaduste, et saaksite kohandada efekti täpselt, kuidas seda vajate.
Teave:
Kodulehekülg: //alvarotrigo.com/multiScroll/
Loodud: alvarotrigo
Paigaldamine: Laadi alla Githubist
7. ScrollMe
ScrollMe on plugin lihtsa parallaksi kerimisefekti lisamiseks teie lehele. See võib skaala, pöörata, tõlkida ja muuta lehekülje elementide läbipaistmatust, kui te allapoole kerite. ScrollMe ei vaja Javascripti ja ainult CSS-teadmised on piisavad. Klassi „animateme” ja nõutavate andme atribuutide lisamisega saate animeerida mis tahes HTML-elemendi. ScrollMe'i kasutatakse kõige paremini CSS-efektide lisamiseks. See on kerge ja kõik animatsioonid on sile, kui kasutate neid mõõdukalt.
Teave:
Koduleht: //scrollme.nckprsn.com/
Loodud: Nick Pearson
Paigaldamine: Laadi alla Githubist
8. Parallaaksi kerimine
Parallax Scroll on lihtne kasutada jQuery plugin, mis võimaldab teil luua parallaksi pildi kerimise efekti, mis leitakse sellistes saitides nagu Spotify. See on üsna lihtne kasutada - täpsustage lihtsalt piltide omanikele vajalikud CSS-klassid. Selle asemel, et kasutada et kasutada seda pluginat, peate kasutama taustapildiga elemente (kasutades CSS-i omadust taustapildi abil). Te saate elemente reageerida CSS @ media päringute abil.
Teave:
Koduleht: //parallax-scroll.aenism.com/
Loodud: Aen
Paigaldamine: Laadi alla Githubist
9. Jarallax
Jarallax on CSS- ja Javascript-raamatukogu, mis on spetsialiseerunud parallaksi kerimisefektidele. Jarallax on konfigureeritud kasutades Javascripti (No jQuery, just pure vanilla JS). See toetab silutud kerimisfunktsioone, leevendamist ja parallaksi animatsiooni. Jarallaxit toetavad enamik brausereid erinevates platvormides. Jarallaxi veebisaidil on suurepärane dokumentatsioon Jarallaxi kohandamiseks teie vajadustele. Jarallaxil on ka videomaterjalid, mis näitavad, kuidas Jarallaxi oma veebilehele seadistada ja kuidas alustada.
Teave:
Kodulehekülg: //www.jarallax.com/
Loodud: Jarallax
Paigaldamine: Lae alla Jarallaxi veebisaidilt
10. Superscrollorama
Superscrollorama on jQuery-põhine plugin, mis toetab animatsiooni liikumist. Seda toidab TweenMax ja Greensock Tweening Engine, mis suurendab animatsiooni jõudlust ja sujuvust. Superscrollorama animatsioone nimetatakse jQuery kaudu ja ka enamikke TweenMax.js funktsioone saab kasutada. Kahjuks ei ole mobiiltelefonid neid animatsioone täielikult toetanud (kuna puutetundliku ekraani seadmed käivad sirvimisel erinevalt). Kuid kasutades setScrollContainerOffset meetodit, saab Superscrollorama efekte kasutada mobiilseadmetes.
Siin on kood seda teha:
.setScrollContainerOffset(x, y)
(x: scrollcontaineri x nihutus, y: kerimiskonteinerit x)
Teave:
Koduleht: //johnpolacek.github.io/superscrollorama/
Loodud: johnpolacek
Paigaldamine: Laadi alla Githubist
VT KA: 10 parimat staatilist veebisaiti
