Garās ritināšanas vietnes ir kļuvušas par ļoti izplatītu web dizaina tendenci. Viens no šī stilīgākajiem apakšveidiem ir paralaksu ritināšanas vietnes, kur attēli pārvietojas, lai izlaistu paralaksu. Tā kā lietotājs ritina lapu uz leju, animācijas tiek aktivizētas un kopumā tā sniedz svaigu izskatu jebkurai vietnei, ja to pareizi īsteno.
Parallaksas ritināšanas vietnes izveide bieži ir nogurdinoša, jo tā prasa padziļinātas zināšanas par CSS, Javascript un labu web dizainu. Šeit ir saraksts ar labākajiem parallaxa ritināšanas spraudņiem, kas ne tikai atvieglo parallaxa ritināšanas vietņu izveidi, bet arī labi apgādātu paralaksu efektu bibliotēku, lai jums būtu vieglāk un ātrāk izveidot labu izskatu. .
ATBILDĪBA : Pirms sākt darbu, ņemiet vērā, ka, lai izmantotu šos spraudņus, ir nepieciešamas dažas zināšanas par tīmekļa tehnoloģijām (HTML / CSS / Javascript). Lielākā daļa no uzskaitītajiem spraudņiem izmanto jquery, tāpēc var būt nepieciešamas arī zināšanas par Jquery.
Parallax ritināšanas spraudņi
1. ScrollMagic
ScrollMagic ir viens no populārākajiem un bagātīgākajiem jquery spraudņiem. Tā ir javascript bibliotēka ļauj izveidot šķietami burvju ritināšanas efektus. Izmantojot ScrollMagic, varat animēt, pamatojoties uz ritināšanas pozīciju. Tas nozīmē, ka jūs varat labot, pārvietot vai animēt HTML elementus, atrodoties ritināšanas laikā, neatkarīgi no tā, kādu laiku vēlaties, un arī viegli pievienot paralakses efektus savai vietnei. Tas ir ļoti pielāgojams, un tas ir arī viegls (6kb, kad gzipēts). Starp citiem parallaxa ritināšanas spraudņiem Scroll Magic ir labākais dokumentācija un ārējie resursi. Tas ir lieliski saderīgs arī ar mobilo.
ScrollMagic ir uzskaitīti daudzi piemēri. Pārbaudiet tos, lai iegūtu iedvesmu un ieteikumus par šīs bibliotēkas izmantošanu.
Par:
Mājas lapa: //janpaepke.github.io/ScrollMagic/
Izveidoja: Jan Paepke
Uzstādīšana:
1. CDN:
2. Lejupielādēt no Github
2. skrollr
skrollr ir viegls tīrs Javascript un CSS bibliotēka, kurā nav iesaistīts jQuery. Būtībā tas ir “Scroll Magic vienkāršots CSS”. Lai izmantotu skrollr, jums nav jāzina Javascript vai jebkura jQuery. Pietiek tikai HTML un CSS. skrollr izmanto datu atribūtus, lai animētu jebkuru vēlamo HTML elementu. Viens no galvenajiem skrollr trūkumiem ir tas, ka animācijas darbojas tikai tad, kad lapa tiek ritināta. Pretējā gadījumā visi efekti tiek aizturēti. skrollr ļauj jums animēt visus HTML elementu CSS rekvizītus.
Par:
Mājas lapa: //prinzhorn.github.io/skrollr/
Izveidoja: Prinzhorn
Uzstādīšana: Lejupielādēt no Github
3. pagePiling.js 
Page Piling ir jQuery spraudnis, kas ļauj izveidot savu vietni dažādās sadaļās, kas pāļu virspusē. Pēc ritināšanas vai piekļūstot URL, katra sadaļa tiek atklāta gludā bīdāmā animācijā. pagePiling.js ir saderīga ar visām platformām - galddatoru, planšetdatoru un mobilo - un darbojas ar lielāko daļu pārlūkprogrammu. Tā degradējas ar vecākām pārlūkprogrammām, kas neatbalsta tās animācijas (piemēram, IE 7). Lai izmantotu spraudni, savā HTML ir jāiekļauj CSS un Javascript fails. pagePiling.js tiek inicializēta ar (document). jau funkciju:
$( document ).ready( function () {
$( ' #pagepiling ' ).pagepiling();
});
Lai iegūtu detalizētākas inicializācijas, apmeklējiet README.md.
Par:
Mājas lapa: //alvarotrigo.com/pagePiling/
Izveidoja: alvarotrigo
Uzstādīšana: Lejupielādēt no Github
4. Alton
Alton ir spraudnis, kas ir jQuery 'scroll-jacking mums' spraudnis. Ritināšanas pacelšana nozīmē, ka jūsu pārlūkprogrammas dzimtā ritināšana ir atspējota mērķtiecīgai ritināšanai, kas, uzsākot (ar peli vai skārienpaliktni), aizvedīs uz nākamo vertikālo punktu ekrānā vai nākamā konteinera augšdaļu.
Alton nodrošina trīs atsevišķu veidu funkcijas, ko sauc par “Hero”, “Bookend” un “Standard”. Standarts ļauj izmantot pilnu lapas ritināšanu, katrai sadaļai ir 100% augstums. Ritinājums parādīs nākamo sadaļu vai iepriekšējo sadaļu. Bookend ļauj jums izveidot grāmatu veida pieredzi, bet Hero ļauj jums ritināt domkratu tikai “Hero” sadaļā, bet pārējai lapai ir (atkārtoti iespējota) vietējā ritināšana.
Par:
Mājas lapa: //paper-leaf.com/alton-jquery-scroll-jacking-plugin/
Izveidoja: papīra lapas
Uzstādīšana: Lejupielādēt no Github
5. Stellar.js
Zvaigžņu ir jQuery spraudnis, ar kura palīdzību jūs varat viegli pievienot paralaksu ritināšanas efektus. Lai palaistu, vispirms ir jāveic funkcija $ .stellar (). Atsevišķu elementu animācijas iestatījumus var konfigurēt, izmantojot šī elementa datu atribūtus.
Zvaigžņu pat ļauj jums būt paralaksu fonam, kas ir fons, kas pārvietojas uz ritināšanas. Viena no noderīgākajām Stellar.js funkcijām ir kompensācijas.
Visi elementi atgriezīsies sākotnējā pozicionēšanā, kad to nobīde vecāks atbilst ekrāna malai - plus vai mīnus jūsu izvēles izvēles nobīde. Tas ļauj viegli izveidot sarežģītus paralaksu modeļus. (Zvaigžņu dokumentācija)
Par:
Mājas lapa: //markdalgleish.com/projects/stellar.js/
Izveidoja: Mark Dalgeish
Uzstādīšana: Lejupielādēt no Github
6. multiScroll.js
Šis spraudnis ir izveidots ar to pašu izstrādātāju (alvarotrigo), kurš ir izveidojis lapu PagePiling.js spraudnis. Kas ir vairāku ritināšanas pamatā, tas ļauj jums izveidot efektu, kurā katra lappuses sadaļa ielādējas divās dalītās daļās, kas slīd uz vietas kā lapas ielādes. Apskatiet mājaslapu, lai skatītu, kā tas izskatās jūsu pārlūkprogrammā. multiScroll.js ļauj iestatīt ritināšanas ātrumu, atvieglošanu, tastatūras ritināšanas opciju un daudzas citas īpašības, lai jūs varētu pielāgot efektu tieši tā, kā jums to vajag.
Par:
Mājas lapa: //alvarotrigo.com/multiScroll/
Izveidoja: alvarotrigo
Uzstādīšana: Lejupielādēt no Github
7. ScrollMe
ScrollMe ir spraudnis, lai savai lapai pievienotu vienkāršus paralaksu ritināšanas efektus. Ritinot uz leju, tas var mērogot, pagriezt, tulkot un mainīt lapas elementu necaurredzamību. ScrollMe nav nepieciešama Javascript, un tikai CSS zināšanas ir pietiekamas. Pievienojot klases “animateme” un nepieciešamos datu atribūtus, varat animēt jebkuru HTML elementu. ScrollMe vislabāk izmanto, lai pievienotu CSS efektus. Tas ir viegls un visas animācijas ir gludas, ja vien tās tiek izmantotas mērenībā.
Par:
Mājas lapa: //scrollme.nckprsn.com/
Izveidoja: Nick Pearson
Uzstādīšana: Lejupielādēt no Github
8. Parallax Scroll
Parallax Scroll ir viegli lietojams jQuery spraudnis, kas ļauj izveidot parallaxa attēla ritināšanas efektu, kas atrodams tādās vietās kā Spotify. Tas ir diezgan vienkārši lietojams - vienkārši norādiet nepieciešamās CSS klases attēlu turētājiem. Nevis izmantot Lai izmantotu šo spraudni, ir jāizmanto elementi, kuriem ir norādīts fona attēls (izmantojot “fona attēla” CSS īpašību. Jūs varat veikt elementus, reaģējot uz CSS @ media vaicājumiem.
Par:
Mājas lapa: //parallax-scroll.aenism.com/
Izveidoja: Aen
Uzstādīšana: Lejupielādēt no Github
9. Jarallax
Jarallax ir CSS un Javascript bibliotēka, kas specializējas paralaksu ritināšanas efektos. Jarallax ir konfigurēts, izmantojot Javascript (No jQuery, tikai tīra vaniļa JS). Tā atbalsta izlīdzinātas ritināšanas funkcijas, atvieglošanu un paralaksu animāciju. Jarallax atbalsta vairums pārlūkprogrammu, pāri platformām. Jarallax tīmekļa vietnē ir lieliska dokumentācija par Jarallax pielāgošanu jūsu vajadzībām. Jarallax ir arī video konsultācijas, kas parāda, kā iestatīt Jarallax jūsu vietnei un kā sākt darbu.
Par:
Mājas lapa: //www.jarallax.com/
Izveidoja: Jarallax
Uzstādīšana: Lejupielādēt no Jarallax mājas lapas
10. Superscrollorama
Superscrollorama ir spraudnis ar jQuery, kas atbalsta animācijas animācijas. To nodrošina TweenMax un Greensock Tweening Engine, kas palielina animācijas veiktspēju un gludumu. Superscrollorama animācijas sauc par jQuery, un jūs varat izmantot arī lielāko daļu TweenMax.js funkciju. Diemžēl mobilās ierīces šīs animācijas pilnībā neatbalsta (jo skārienekrāna ierīces rokturi ritina citā veidā). Tomēr, izmantojot setScrollContainerOffset metodi, Superscrollorama efektus var piekļūt mobilajās ierīcēs.
Šeit ir kods, kā to izdarīt:
.setScrollContainerOffset(x, y)
(x: ritināšanas konteinera x nobīde, y: ritināšanas konteinera x nobīde)
Par:
Mājas lapa: //johnpolacek.github.io/superscrollorama/
Izveidoja: johnpolacek
Uzstādīšana: Lejupielādēt no Github
SKAT. ARĪ: 10 labākie statiskie vietņu ģeneratori
