Efni.
- Að byrja
- Að búa til grunn plötuspilara
- Að búa til fæturna
- Handleggurinn og höfuðið
- Litir og áferð
- Flutningur og útflutningur
- Klára lógóið
- Hreyfðu lógóið
Það eru nokkrar leiðir til að búa til þrívíddar hreyfimyndir á vefnum, flestar þeirra þurfa góða þekkingu á JavaScript og WebGL, eða notkun viðbótar eins og Flash. Þökk sé CSS 3D umbreytingum er mögulegt að búa til 3D með aðeins HTML og CSS, en það er ekki auðvelt að gera það. Tridiv, ókeypis netforritið mitt, einfaldar ferlið og býður upp á einfalt og innsæi WYSIWYG viðmót sem gerir notendum kleift að búa til 3D hluti án þess að skrifa eina línu af kóða.
Í þessari kennslu ætlum við að búa til og lífga upp á lógó fyrir „Tridiv Records“, skáldað plötufyrirtæki, og notum aðeins HTML og CSS. Helsta myndefni lógósins verður búið til í þrívídd með Tridiv. Síðan munum við bæta við leturfræðiþætti með venjulegum HTML og CSS.
Þú getur séð endanlegt fjör og kóðann sem myndar það hér.
Að byrja
Við ætlum að byrja á því að búa til plötuspilara í þrívídd með Tridiv. Farðu á tridiv.com og settu forritið í gang. Þú verður að nota annað hvort Chrome, Safari eða Opera 15 (eða nýrri).
Áður en byrjað er er mikilvægt að skilja Tridiv tengi. Aðalhluti ritstjórans er samsettur úr fjórum skoðunum: efst til vinstri er þrívíddarskoðunin, sem veitir heildarsýn yfir sviðið. Hinar þrjár skoðanirnar sýna það að ofan, frá hlið og að framan. Með því að nota þessar þrjár skoðanir er hægt að búa til, breyta og færa þrívíddarform.
Lárétti tækjastikan er skipt í tvo hluta: vinstri hlutinn birtir upplýsingar sem tengjast skjalinu þínu; hægri hlutinn inniheldur verkfæri til að búa til og breyta formum. The Hreyfðu þig val og Breyta valtakkar skipta á milli mismunandi stillinga.
Eiginleikarúðin (hliðarstikan) sýnir skjalstillingar eins og aðdrátt og smella á rist og eiginleika lögunarinnar sem valin er (stærð, staðsetning, snúningur, litur og svo framvegis). Einingin sem notuð er fyrir mál og staðsetningu er ems; snúningshornin eru í gráðum.
Til að koma í veg fyrir rugling síðar í kennslunni ætlum við að nota eftirfarandi stuttmynd:
w = breidd h = hæð d = dýpt diam = þvermál x deg = snúningur í x-ás y deg = snúningur í y-ás z deg = snúningur í z-ás
Að búa til grunn plötuspilara
Byrjaðu á því að stilla aðdráttargildið á 200. Til að hjálpa til við að teikna formin skaltu virkja stillingu smella á rist í Skjalastillingar kafla hliðarstikunnar. Stilltu smelligildið á 0.125.
Grunnur plötuspilarans er samsettur úr einföldum kúbeini, svo smelltu á Bætið kúbeini við hnappinn í efstu tækjastikunni. Þú ættir að sjá kúbeinið birtast í öllum fjórum skoðunum í ritstjóranum.
Endurnefna lögunina í stöð með því að nota heiti reitinn í eignarrúðunni (undir Lögun eiginleika). Heiti lögunarinnar verður að vera gilt heiti CSS bekkjarins því það verður notað í kóðanum sem ritstjórinn býr til. Við munum nota þessi bekkjarnöfn síðar þegar við erum að gera teiknimyndina, svo vertu viss um að þú nafngreindir allar nýjar lög sem þú býrð til rétt.
Þegar cuboid hefur fengið nafnið skaltu ganga úr skugga um að það sé valið í efstu myndinni (það ætti að vera auðkennt með bláum lit, með hringlaga verkfærahring í kringum það) og smelltu síðan á Breyta hnappinn efst á hringnum til að sýna breytingahandtökin. Dragðu stjórnhöndlana á hliðum kúbeinsins þar til breidd og dýpt nær w = 10 og d = 8 í Lögun eiginleika.
Smelltu á lögunina inni í hliðarsýninni. Þetta mun sýna klippibúnaðinn í þessari mynd og leyfa okkur að breyta hæð þess. Stilltu hæðina þar til hún nær h = 2. Þú getur einnig slegið gildi beint inn í eignarrúðuna. Til að rúlla horn kúbeinsins, breyttu hornagildunum í eiginleikarúðunni í 1.75, ýttu síðan á [Koma inn] lykill til að beita breytingunum. Þú munt hafa eitthvað svona.
Að búa til fæturna
Fyrir fætur plötuspilara ætlum við að nota strokka. Bættu við strokka og breyttu síðan þvermálinu í diam = 1,75 og hæð þess til h = 0,5. Smelltu á Hreyfðu þig valhnapp í efstu tækjastikunni til að sýna dreganlegt svæði á löguninni. Færðu strokkinn undir botninn og settu hann í eitt af hornunum. (Þú gætir þurft að færa það efst, til hliðar og að framan.)
Afritaðu strokka (ýttu á Afrit hnappinn í hringlaga verkfærum eða ýttu á D lykill) og til að færa nýja strokkinn í annað horn á stöðinni. Endurtaktu ferlið þar til allir fjórir fætur eru rétt staðsettir. Ekki gleyma að nefna hólkana (t.d. fætur-vinstri-toppur, fætur-hægri-toppur, fætur-vinstri-botn, fætur-vinstri-toppur). Þegar þú hefur gert það ætti niðurstaðan að líta svona út.
Við munum nú skoða að búa til fatið, diskinn, armásinn og hnappinn. Ferlið við að búa til næstu form er svipað og fyrir fæturna. Hér eru málin sem notuð eru fyrir mismunandi strokka:
fat: diam = 7; h = 0,5 diskur: diam = 6,75; h = 0,25 hnappur: diam = 1,5; h = 0,25 arm-ás grunnur: diam = 2,25; h = 0,25 armás: diam = 1.375; h = 1
Til að betrumbæta hliðar strokkanna er hægt að fjölga andlitum í hverjum og einum með því að nota hliðarreitinn í eiginleikarúðunni. Ekki bæta við of mörgum hliðum þar sem þetta getur haft neikvæð áhrif á frammistöðu ritstjórans á heimsvísu og endanlegt fjör. Í þessu tilfelli myndi ég ráðleggja þér að nota ekki meira en 32 hliðar fyrir fatið og diskinn. Þú ættir að hafa eitthvað svona.
Handleggurinn og höfuðið
Fyrir handlegginn og höfuð plötuspilara ætlum við að nota kúbu. Búðu til kúbein fyrir handlegginn (w = 0,25; h = 0,25; d = 4), notaðu síðan snúning á -33° á y-ás. Búðu til kúbu fyrir höfuðið (w = 0,5; h = 0,5; d = 1), notaðu síðan snúning á -33° á y-ás. Réttu bæði formin við armásásinn. Niðurstaðan ætti að líta svona út.
Litir og áferð
Við erum næstum búin með plötuspilara. Lokaskrefið er að úthluta litum og setja áferð á vínylinn (mynd sem táknar yfirborð plötunnar). Veldu lögun til að úthluta litum og smelltu á litum reit í eignarrúðunni. Tridiv gerir þér kleift að tilgreina einstaka liti fyrir hvert andlit lögunarinnar, en í þessu dæmi þurfum við að nota allt reitinn til að breyta litnum á öllum andlitunum. Til að gera þetta, sláðu bara inn hex litakóða í reitinn og staðfestu síðan með því að ýta á Koma inn.
Hér eru litirnir sem notaðir eru í þessu dæmi:
undirstaða: # 0099FF fætur, hnappur, ás, handleggur og höfuð: # F2EEE5 diskur: # fa7f7a
Fyrir áferð vínylsins er ferlið svipað og úthlutað litum. Veldu skífukútinn og smelltu síðan á myndir reit í eignarrúðunni. Límdu slóðina á myndina sem þú vilt setja á vínylinn í efsta reitinn og staðfestu með því að ýta á Koma inn. Þú getur notað eigin mynd eða hlaðið niður þeirri sem notuð er í þessu dæmi.
Þú ættir nú að hafa eitthvað sem lítur svona út.
Flutningur og útflutningur
Nú þegar plötusnúðurinn er búinn ætlum við að vinna að því hvernig það er veitt áður en það er flutt út. Smelltu á Forskoða hnappinn efst á eignarrúðunni. Stilltu aðdráttargildið á 200 að sýna plötuspilara stærri. Til að fjarlægja svörtu rammana á formunum, farðu í Landamæri hluta rúðunnar og stilltu ógagnsæi á 0. Niðurstaðan ætti að líta svona út.
Við viljum að kveikt sé á plötuspilara að ofan. Til að gera þetta skaltu snúa senunni á þann hátt að toppur plötuspilarans snúi að þér. Grunnurinn ætti að líta fullkomlega rétthyrndur út. Með því að breyta ljósum og dökkum gildum í tridiv.com/d/4k6sniðinu á eignarrúðunni endurnýjast skugginn innan senunnar. Breyttu ljósgildinu í 0.
Plötuspilari er nú tilbúinn til útflutnings!
Klára lógóið
Við erum tilbúin að bæta textanum við lógóið og búa til lógó fjör. Smelltu á Breyta á CodePen hnappinn neðst til vinstri á Forskoða skoða til að flytja kóðann út í CodePen. Það er mikilvægt að hafa í huga að CSS kóðinn sem Tridiv myndar notar ekki forskeyti söluaðila, svo þú verður að nota verkfæri eins og prefixr.com eða leaverou.github.io/prefixfree til að gera kóðann virkan í öllum vafra. Byrjaðu á því að loka JavaScript glugganum þar sem við ætlum ekki að nota það. Í HTML glugganum, fjarlægðu stílmerkið sem notað er á .vettvangur div.
Stækkaðu CSS gluggan og bættu við eftirfarandi kóða í lokin:
.scene {umbreyting: þýðaY (-140px) snúaX (-55deg); }
Hér, the þýða Y (-140 pixlar) færir plötuspilara 140px upp á við og gefur pláss fyrir textann undir henni. Síðan, þá rotateX (-55deg) stillir lóðrétta halla plötuspilarans.
Til að bæta við textanum þarftu að bæta við a .title div rétt eftir opnun #tridiv div í HTML glugganum. Inni, bættu við tveimur spannar> (.heiti og titill), aðskilin með hr />:
div id = "tridiv"> div> span> TRIDIV / span> hr /> span> RECORDS / span> / div>…
Þú þarft þá að nota rétt leturgerð og stíl. Í CSS glugganum skaltu flytja inn Open Sans leturgerðina sem notað er í merkinu og bæta við grunnstíl textaþáttanna.
@import url (http://fonts.googleapis.com/css?family=Open+Sans:300); / * Miðja textablokkar + grunn leturstíll * / titill {staða: alger; efst: 50%; vinstri: 50%; framlegð: 0 0 0 -165px; breidd: 330px; hæð: 5em; font-family: ‘Open Sans’, sans-serif; leturþyngd: 300; leturstærð: 24px; text-align: miðja; bil milli stafa: 1.5em; litur: # 0099FF; } titill hr {border: 1px solid # fa7f7a; framlegð: .75em 0; } titilsvið {display: block; } .main-title {font-size: 2.15em; }. undirheiti {texti-inndráttur: .25em; }
Voilà! Merkið þitt er lokið. Það ætti að líta út eins og myndin hér að neðan. Þegar þrívíddarlíkanið þitt er búið geturðu notað kraft CSS til að gera það enn betra með því að bæta við stílum, hreyfimyndum eða músaviðburðum: meðhöndlaðu bara þrívíddarlíkanið eins og hvert annað HTML frumefni.
Hreyfðu lógóið
Sjá fjör með merkinu hér. Þegar hlutar plötusnúðarins „detta inn“ deila hver þeirra sömu lykilrammafjörunum með mismunandi töfum. Formin hafa efsta eiginleikann stillt á 50%. Til að skapa fallandi áhrif, gerum við efsta eiginleikann frá -400px til 50%:
@keyframes lækka {0% {efst: -400px; } / * Við byrjum hreyfimyndina með því að staðsetja lögunina í hæðina 400px * / 100% {efst: 50%; } / * þá endum við það á upphaflegri stöðu * /}
Þú getur bætt þessu hreyfimynd við allar gerðir, sem hér segir:
.shape {efst: -400px; fjör: haust 1s léttir 0s áfram; }
Stilltu efsta eiginleikann á -400px og bættu við töf:
. diskur {fjör-seinkun: 1.05s; } .disk {fjör-seinkun: 1.35s; } .hnappur {fjör-seinkun: 1,5 sekúndur; } ...
Búðu til endanleg „hopp“ áhrif með snúaX eiginleiki:
90% {umbreyting: þýðaY (-5em) snúaX (780deg) snúaY (0deg); } 95% {umbreyting: þýðaY (-4em) snúaX (620deg) snúaY (0deg); } 100% {umbreyting: þýðaY (-4,5em) snúaX (660deg) snúaY (0deg); }
Þannig bjuggum við til þessa tilteknu útgáfu, en mundu: það eru engin takmörk!
Orð: Julian Garnier
Þessi grein birtist upphaflega í netblaði 248.
