Soovitatav, 2024

Toimetaja Valik

10 parimataksi parimate kerimispistikutega

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

Top