Efni.
- Hvernig getur mo.js hjálpað?
- 01. Byrjaðu
- 02. Búðu til síðuuppbyggingu
- 03. Skipuleggðu síðuna
- 04. Tengdu CSS
- 05. Stíllu bakgrunninn
- 06. Stílaðu textann
- 07. Settu upp mo.js
- 08. Búðu til fyrsta sprenginguna
- 09. Búðu til hringhlutinn
- 10. Lífaðu hringinn
- 11. Búðu til sprungna marghyrninga
- 12. Búðu til aðra sprenginguna
- 13. Bættu við hringsprengingum
- 14. Gera grunnbólu
- 15. Bættu við mörgum formum
- 16. Bæta við hjálparbókasöfnum
- 17. Framfarið hreyfimyndina
- 18. Lærðu meira um mo.js
Mo.js er einstakt JavaScript grafík bókasafn fyrir hreyfimyndir sem auðveldar ekki aðeins skjáhleðslutæki á öllum skjánum, heldur einnig smella til að lifa af örvirkni og fjöldann allan af lögun.
Ef þú hefur fylgst með vettvangi vefhönnunar um stund er líkur á að þú hafir rekist á - eða haft samskipti við - fjölbreytt úrval af hreyfitækni og bókasöfnum. Alger tækni eins og CSS, HTML5 og JavaScript verða enn öflugri og stuðningur vafra batnar með tímanum. Merkingin er sú að hægt er að styðja flóknari hreyfimyndir á vefnum yfir tæki. Mundu að ef þú ert að byggja upp flókna síðu verður vefþjónusta þín að geta stutt verkefnið þitt.
Þarftu innblástur í fjör? Hér eru nokkur æðisleg dæmi um topp CSS fjör til að endurskapa. Viltu byggja upp síðu án kóðunar? Prófaðu þessa vefsíðugerðarmenn.
Hvernig getur mo.js hjálpað?
Vef fjör, eins og það virðist, er komið til að vera.Hins vegar er galli við vinsælustu hreyfitækni að þær eru dregnar að hreyfingu á hefðbundnum UI / UX þáttum eins og myndasýningum, flipahnappum og fellivalmyndum. Fyrir vikið getur notkun þeirra að lokum gert síðuna þína of kunnuglega og ekki spennandi.
Mo.js getur hjálpað til við þetta. Notkun bókasafnsins hjálpar til við að hreyfa við ekki svo venjulegum vefþáttum með því að nota innbyggða íhluti þess eins og html, lögun, hringiðu, springa og skjögra. Bókasafnið er mjög auðvelt í notkun, hratt, sjónhimnu tilbúið, mát og opinn uppspretta. Í þessari kennslu eru grunnatriðin í vinnu með mo.js kynnt og sýndar tvær aðferðir; sprengja og kúla.
01. Byrjaðu
Byrjaðu á því að búa til möppu, mo.js, á skjáborðinu þínu til að geyma kennsluskrárnar. Búðu til þrjár möppur í viðbót: css til að geyma stílskrár, img fyrir myndir og js fyrir JavaScript skrár. HTML skrár verða geymdar í rótarmöppunni. (Þú gætir viljað íhuga að taka afrit af skýjageymslu).
02. Búðu til síðuuppbyggingu
Opnaðu kóða ritstjórann þinn og búðu til index.html skjal til að innihalda merkingu fyrir aðal vefsíðuna. Byrjaðu á því að búa til grunnbyggingu og gefðu síðunni viðeigandi titil.
! DOCTYPE html> html lang = "en"> head> meta charset = "utf-8"> title> Blast Technique title> / head> body> / body> / html>
03. Skipuleggðu síðuna
Kennslan skiptist í tvo hluta; sú fyrri sýnir sprengjutæknina en hin sýnir kúluhugtakið. Fyrir vikið undirbúum við tvær HTML skrár, eina fyrir hverja tækni. Til að koma sprengjutækninni af stað skaltu búa til deildarhluta til að innihalda blaðsíðuheitið. Skilaðu síðunni í vafranum þínum þar sem þú ættir að fylgjast með óhönnuðum texta efst í vinstra horninu.
body> div> p> Mo.js Animation / p> / div> / body>
04. Tengdu CSS
Opnaðu kóða ritstjórann þinn og búðu til styles.css skrá inni í css möppunni. Búðu til tengil á þessa skrá í html skjalinu þínu með því að bæta þessum kóða við höfuðhlutann, hlekkur rel = ”stílblað” href = ”css / styles.css”>. Þar sem engum stíl hefur verið bætt við birtist síðan eins og sýnt er í skrefi 3. Að öðrum kosti, þar sem stíllinn er í lágmarki, getur þú valið að nota inline stíl með því að sameina HTML og CSS.
05. Stíllu bakgrunninn
Því næst stílum við bakgrunninn með því að bæta við bakgrunnsmynd. Við höfum notað ókeypis landslags bakgrunn frá Nikolai Ultang frá Pexels. Þú getur sótt það hér. Vistaðu þetta (eða þína eigin mynd) inni í img möppunni. Framleiddu síðuna til að sýna breytingar á bakgrunninum.
meginmál, html {bakgrunnsmynd: url (bg.webp); bakgrunnsstærð: kápa; bólstrun: 0; framlegð: 0; breidd: 100%; hæð: 100%; flæða: falið; }
06. Stílaðu textann
Textinn er síðan stíll þannig að hann birtist í miðju síðunnar eins og hann birtist efst í vinstra horninu. Athugaðu að til að miðstýra textanum veljum við algera stöðu og stillum nákvæmlega staðsetningu hennar með efri, vinstri og hægri spássíu. Textanum er einnig umbreytt með því að nota text-umbreytingu eignina. Textateiningin er einnig stillt á miðju.
texti {font-family: Century Gothic, sans-serif; litur: #fff; texta-umbreyting: hástafi; leturstærð: 50 pixlar; leturþyngd: djarfari; staða: alger; efst: 50px; vinstri: 25%; rétt: 30%; text-align: miðja; }
07. Settu upp mo.js
Eins og með önnur bókasöfn er mo.js sett upp í gegnum marga möguleika. Einfaldasta leiðin, sem við notum, er að fá aðgang að henni beint frá CDN netþjóni. Bættu við eftirfarandi kóða í meginhlutanum.
skrift src = ‘//cdn.jsdelivr.net mojs / 0.265.6 / mo.min.js '> / skrift>
Ef þú ert að þróa línu er hægt að hlaða niður bókasafninu beint frá GitHub og setja það upp með því að nota Bower eða NPM pakkana með því að nota viðeigandi skipanir.
bower setja upp mo-js npm setja upp mo-js
Þegar það er hlaðið niður er hægt að vísa beint til þess.
skrift src = "mo.js" tegund = "text javascript"> / skrift>
Að lokum skaltu búa til nýja script.js skrá og vista hana í js möppunni. Við munum bæta JavaScript virkni við þessa skrá. Tengdu það í líkamshlutanum sem hér segir. Settu það fyrir neðan textaheitið eins og sýnt er hér að neðan.
meginmál> div> p> mo.js Teiknimynd / p> / div> script src = 'https: //cdn.jsdelivr net / mojs / 0.265.6 / mo.min.js'> / script> script src = "js /script.js "> handrit> / meginmál>
08. Búðu til fyrsta sprenginguna
Áður en haldið er áfram að þróa kóðann er skynsamlegt að varpa ljósi á það sem við erum að búa til. Að sprengja eitthvað þýðir einfaldlega að brjóta það í sundur í smærri bita á sprengifiman hátt. Við munum búa til einfaldan hlut (hring) og setja hann upp leit að þegar notandi smellir á hann brotni hann í sundur á sprengifiman hátt.
09. Búðu til hringhlutinn
Í fyrsta lagi er hluturinn sem á að sprengja búinn til (hringur). Hins vegar styður mo.js önnur form, þar á meðal rétthyrningur (rétthyrningur), kross, jafn, sikksakk og marghyrningur. Þar sem þér mistekst að tilgreina lögunina verður hún sjálfgefin í hring. Til að búa til einfaldan hring skaltu lýsa því yfir með var eða const og úthluta eiginleikum þess með því að hringja í lögunaraðgerðina.
// að búa til einfaldan hlut Const Circ = new mojs.Shape ({isShowStart: true, radius: 100,});
Kóðinn býr til sjálfgefna hringhlut með tilteknum radíus. Breytunni isShowStart er úthlutað Boolean gildi til að tilgreina hvort þú þurfir að sýna hlutinn eða ekki. Gefðu kóðann til að birta lítinn magentalitaðan hring í miðju síðunnar.
10. Lífaðu hringinn
Kóðabútinn tilgreinir að kvarðinn og ógagnsæi breytist úr 1 í 0, sem gefur til kynna að hluturinn hverfi. Þroska og seinkun hreyfimyndarinnar er einnig stillt. Athugaðu að hreyfimyndin spilar ekki þar sem við eigum enn eftir að frumstilla hana. Til að gera það skaltu bæta við aðgerðinni hér að neðan.
document.addEventListener (’smellur’, fall (e) {Circ. aukaleikur ();});
11. Búðu til sprungna marghyrninga
Nú þegar hringurinn er líflegur búum við til sprengiefni sem birtist á sama tíma. Fyrsta sprengingin notar marghyrningsform til að draga fram sprenginguna. Til að búa til sprengingu, notaðu mo.js aðgerðina Burst eins og sýnt er í kóðabútnum hér að neðan.
const burst1 = ný mojs.Burst ({vinstri: 0, efst: 0, talning: 7, radíus: {50: 250}, börn: {fylling: 'hvítur', lögun: 'marghyrningur', heilablóðfall: {'hvítur' : '# A50710'}, strokeWidth: 4, radius: 'rand (30, 60)', radiusY: 0, scale: {1: 0}, pathScale: 'rand (.5, 1)', degree: 360, isForce3d: satt}});
Kóðinn úthlutar sjö marghyrningsformum við sprenginguna og tilgreinir tvo geisla. Sú fyrri vísar til heildar fjörsins, en sú síðari beinist að tilteknum marghyrningshlutum í fjörinu. Gakktu úr skugga um að bæta sprengingunni við atburðarhlustunaraðgerðina svo hún bregðist við músasmelli. Athugið að tveimur nýjum breytum hefur verið bætt við; lagið og mynda. Tune gerir sprenginguna til að koma fram hvar sem er á síðunni en myndar frumstillingu á fjörinu. Skilaðu síðunni. Fylgstu með springandi þáttum sem birtast á sama tíma og hringurinn.
document.addEventListener (‘smellur’, virka (e) {burst1. lag ({x: e.pageX, y: e.pageY}). búa til (). endurspilun (); Circ. endurspilun ();});
12. Búðu til aðra sprenginguna
Næst búum við til aðra sprenginguna með því að nota mismunandi lögunarmöguleika. Kóðinn fylgir uppbyggingu fyrri sprengingar og breytir aðeins nokkrum breytum.
const burst2 = ný mojs.Burst ({efst: 0, vinstri: 0, talning: 4, radíus: {0: 250}, börn: {lögun: ['hringur', 'réttur]], stig: 5, fylla: ['hvítur'], radíus: 'rand (30, 60)', seinkun: 'skakkur (50)', léttir: ['cubic.out', 'cubic.out', 'cubic.out'], skala: {1: 0}, pathScale: 'rand (.5, 1)', isForce3d: true}});
Bættu springunni við hlustunaraðgerðina.
document.addEventListener ('smellur', aðgerð (e) {burst1. lag ({x: e.pageX, y: e.pageY}). býr til (). endurspilun (); burst2. lag ({x: e.pageX , y: e.pageY}). búa til (). endurspilun (); Umspilun ();});
13. Bættu við hringsprengingum
Til að auka fjörið enn frekar bætum við við hringlaga sprengingar. Þegar kóðinn er skoðaður í skrefum 11 og 12 kemur í ljós margt líkt með þessum tveimur sprengingum. Við að búa til þriðju sprenginguna, forðumst við að endurskrifa of mikið kóða með því að nota dreifiveituna sem er skrifuð sem þrír punktar (...). Í fyrsta lagi lýsum við yfir breytu sem inniheldur svipaða eiginleika og við viljum endurnýta. Eftir það er hægt að búa til hina tvo hringina með því einfaldlega að nota dreifiveituna.
// búa til breytuna með svipuðum breytum const CIRCLE_OPTS = {vinstri: 0, toppur: 0, fylla: 'hvítur', mælikvarði: {.2: 1}, ógagnsæi: {1: 0}, isForce3d: satt, isShowEnd: ósatt };
Kóðinn tilgreinir fyllingargerðina, kvarða, ógagnsæi og hvort þær eigi að birtast í lok hreyfimyndarinnar. Hreyfimyndirnar tvær eru búnar til sem hér segir.
const circle1 = new mojs.Shape ({... CIRCLE_OPTS, radius: 200}); const circle2 = new mojs.Shape ({... CIRCLE_OPTS, radius: 240, easing: ‘cubic.out’, delay: 300});
Bættu við hringlaga formunum.
document.addEventListener ('smellur', aðgerð (e) {burst1. lag ({x: e.pageX, y: e.pageY}). býr til (). endurspilun (); burst2. lag ({x: e.pageX , y: e.pageY}). búa til (). endurspil (); Umspil ();});
14. Gera grunnbólu
Ólíkt sprengifjörinu, sem brýtur hlutinn í smærri hluti, þýðir kúla fjörið hins vegar smellt hlutinn í stærra rými. Hugmyndin samþykkir líkinguna við að sprengja loftbelg þar sem hluturinn stækkar stöðugt að stærð. Til að gera þetta búum við einfaldlega til nýja breytu openBackground og úthlutum eiginleikum sem gera það að verkum að allur bakgrunnurinn nær svipuðum lit og hluturinn. Fyrir vikið skapar þetta litbrigði þess að kúla.
const openBackground = nýr mojs.Shape ({fylla: '# FC2D79', vinstri: 0, efst: 0, mælikvarði: {0: 4.5}, isShowStart: satt, radíus: 15, isForce3d: satt, er Tímalínulaus: satt, seinkun: 150, radíus: 200, léttir: 'cubic.out', backwardEasing: 'expo.in',});
Gakktu úr skugga um að bæta bakgrunnsbreytunni við atburðarhlustunaraðgerðina.
openBackground. lag ({x: e.pageX, y: e.pageY}). endursýning ();
15. Bættu við mörgum formum
Í kjölfar hugmyndarinnar í skrefi 14 færum við nú dæmið áfram til að fela marga litaða hringlaga hluti, sem þegar smellt er út á svipaðan hátt og sýna smá texta. Breyttu núverandi html skrá og afritaðu kóðann í meginmálinu. Það skapar grunnbyggingu síðunnar.
16. Bæta við hjálparbókasöfnum
Því næst er bætt við nokkrum bókasöfnum í meginhlutanum til að auðvelda skrun og framleiða hljóð þegar smellt er á hlutina.
skrift src = 'https: //cdnjs.cloudflare.com ajax / libs / howler / 1.1.26 / howler.min.js'> skrift> script src = 'https: //cdn.jsdelivr.net mojs / 0.119.0 /mo.min.js '> / script> script src =' https: //cdn.jsdelivr.net hammerjs / 2.0.4 / hammer.min.js '> / script> script src =' https: // cdnjs. cloudflare.com ajax / libs / iScroll / 5.1.1 / iscroll-probe.min js '> / script>
17. Framfarið hreyfimyndina
Því næst bætum við við stíl fyrir einstaka flokka sem auðkenndir eru í HTML skjölunum. Mo.js virkni er síðan bætt við. Kóðanum í heild (css og js) er deilt með kennsluskrámunum til yfirferðar.
18. Lærðu meira um mo.js
Þó að námskeiðið sýni loftbólu- og sprengitækni eru til frekari úrræði á netinu sem geta hjálpað þér að fylgjast hratt með námsferlinu. Sumt af þessu inniheldur mo.js námskeið um Github og kynningar einnig á Github.
Þessi grein var upphaflega birt í tölublaði 291 í tímaritinu skapandi vefhönnun Vefhönnuður. Kaupa tölublað 291.
