Sadržaj
- Početak rada
- Izrada baze gramofona
- Stvaranje stopala
- Ruka i glava
- Boje i teksture
- Prikaz i izvoz
- Dovršavanje logotipa
- Animirajte logotip
Postoji nekoliko načina za stvaranje 3D animacije na webu, od kojih je većini potrebno dobro poznavanje JavaScript-a i WebGL-a ili upotreba dodatka poput Flasha. Zahvaljujući CSS 3D transformacijama moguće je stvoriti 3D koristeći samo HTML i CSS, ali to nije lako učiniti. Tridiv, moja besplatna internetska aplikacija, pojednostavljuje postupak, nudeći jednostavno i intuitivno WYSIWYG sučelje koje korisnicima omogućuje stvaranje 3D objekata bez pisanja ijednog retka koda.
U ovom uputstvu stvorit ćemo i animirati logotip za 'Tridiv Records', izmišljenu izdavačku kuću, koristeći samo HTML i CSS. Glavni vizualni logotip stvorit će se u 3D tehnologiji pomoću Tridiva. Tada ćemo dodati tipografske elemente pomoću uobičajenih HTML-a i CSS-a.
Konačnu animaciju i kôd koji je generira možete vidjeti ovdje.
Početak rada
Započet ćemo s izradom gramofona u 3D-u pomoću Tridiva. Idite na tridiv.com i pokrenite aplikaciju. Morat ćete upotrebljavati Chrome, Safari ili Opera 15 (ili noviji).
Prije početka važno je razumjeti sučelje Tridiv. Glavni odjeljak uređivača sastoji se od četiri prikaza: u gornjem lijevom kutu je 3D prikaz koji pruža cjelovit prikaz scene. Preostala tri prikaza prikazuju ga s gornje, bočne i prednje strane. Pomoću ova tri prikaza možete stvarati, uređivati i premještati 3D oblike.
Vodoravna alatna traka podijeljena je u dva dijela: lijevi dio prikazuje podatke koji se odnose na vaš dokument; desni dio sadrži alate za stvaranje i uređivanje oblika. The Potez izbor i Uredi gumbi za odabir prebacuju se između različitih načina uređivanja.
Okno svojstava (bočna traka) prikazuje postavke dokumenta kao što su zumiranje i privezivanje na mrežu te svojstva odabranog oblika (veličina, položaj, rotacija, boja itd.). Jedinica koja se koristi za dimenzije i položaj je ems; kutovi rotacije su u stupnjevima.
Kako bismo izbjegli zabunu kasnije u vodiču, poslužit ćemo se sljedećom skraćenicom:
w = širina h = visina d = promjer dubine = promjer x stupanj = rotacija u x-osi y deg = rotacija u y-osi z deg = rotacija u z-osi
Izrada baze gramofona
Započnite postavljanjem vrijednosti zuma na 200. Da biste pomogli u crtanju oblika, aktivirajte postavku privezivanja na mrežu u Postavke dokumenta odjeljak bočne trake. Postavite vrijednost ugriza na 0.125.
Podnožje gramofona sastoji se od jednostavnog kuboida, pa kliknite na Dodajte kockasti na gornjoj alatnoj traci. Trebali biste vidjeti kako se kocka pojavljuje u sva četiri prikaza u uređivaču.
Preimenujte oblik u baza koristeći polje imena okna svojstava (pod Svojstva oblika). Ime oblika mora biti valjano ime CSS klase jer će se koristiti u kodu koji generira uređivač. Te ćemo nazive klasa koristiti kasnije prilikom animiranja logotipa, zato pripazite da pravilno imenujete svaki novi oblik koji kreirate.
Nakon što je imenovan kuboid, provjerite je li odabran u prikazu odozgo (trebao bi biti označen plavom bojom, s kružnim prstenom alata oko njega), a zatim kliknite Uredi gumb na vrhu prstena za prikaz ručki za uređivanje. Povucite kontrolne ručke na bočnim stranama kuboida, dok ne dosegnu širinu i dubinu w = 10 i d = 8 u Svojstva oblika.
Kliknite oblik unutar bočnog prikaza. Ovo će prikazati ručke za uređivanje u ovom prikazu, omogućujući nam promjenu njegove visine. Podesite visinu dok ne dosegne h = 2. Također možete upisati vrijednosti izravno u okno svojstava. Da biste zaokružili kutove kuboida, promijenite vrijednosti uglova u oknu svojstava na 1.75, zatim pritisnite [Unesi] tipka za primjenu promjena. Imat ćete nešto poput ovoga.
Stvaranje stopala
Za noge gramofona koristit ćemo cilindre. Dodajte cilindar, a zatim mu promijenite promjer u prečnik = 1,75 a njegova visina do h = 0,5. Klikni na Potez gumb za odabir na gornjoj alatnoj traci za prikaz područja koje se može povući na obliku. Pomaknite cilindar ispod baze, smjestivši ga u jedan od uglova. (Možda ćete ga trebati pomaknuti u pogledima s gornje, bočne i prednje strane.)
Duplicirajte cilindar (pritisnite Duplikat u kružnom prstenu alata ili pritisnite D ključ) i da novi cilindar premjestite u drugi kut osnove. Ponavljajte postupak dok sve četiri noge nisu pravilno postavljene. Ne zaboravite imenovati cilindre (na primjer, stopala-lijevo-gore, stopala-desno-vrh, stopala-lijevo-dno, stopala-lijevo-gore). Kada to učinite, rezultat bi trebao izgledati ovako.
Sada ćemo razmotriti stvaranje ploče, diska, osi ruke i gumba. Postupak stvaranja sljedećih oblika sličan je onom za stopala. Evo dimenzija koje se koriste za različite cilindre:
plata: diam = 7; h = 0,5 disk: promjer = 6,75; h = 0,25 tipka: prečnik = 1,5; h = 0,25 os-krak-osnova: promjer = 2,25; h = 0,25 osa kraka: promjer = 1.375; h = 1
Da biste pročistili stranice cilindara, možete povećati broj ploha na svakom od njih, koristeći polje stranice u oknu svojstava. Nemojte dodavati previše strana, jer to može negativno utjecati na globalnu izvedbu uređivača i konačnu animaciju. U ovom slučaju, savjetovao bih vam da ne koristite više od 32 stranice za pladanj i disk. Trebao bi imati ovako nešto.
Ruka i glava
Za ruku i glavu gramofona koristit ćemo kuboide. Za ruku stvorite kockasti (w = 0,25; h = 0,25; d = 4), a zatim primijenite rotaciju od -33° na os y. Za glavu stvorite kockasti (w = 0,5; h = 0,5; d = 1), a zatim primijenite rotaciju od -33° na os y. Poravnajte oba oblika s cilindrom osi ruke. Rezultat bi trebao izgledati ovako.
Boje i teksture
Gotovo smo gotovi s gramofonom. Posljednji je korak dodijeliti boje i primijeniti teksturu na vinil (slika koja predstavlja površinu ploče). Da biste dodijelili boje, odaberite oblik i kliknite na boje polje u oknu svojstava. Tridiv vam omogućuje da odredite pojedinačne boje za svako lice oblika, ali u ovom primjeru trebamo koristiti sve polje za promjenu boje svih lica. Da biste to učinili, samo unesite heksadecimalni kôd boje u polje, a zatim potvrdite pritiskom Unesi.
Evo boja koje se koriste u ovom primjeru:
baza: # 0099FF stopala, gumb, os, ruka i glava: # F2EEE5 disk: # fa7f7a
Za teksturu vinila postupak je sličan dodjeli boja. Odaberite cilindar diska, a zatim kliknite na slike polje u oknu svojstava. U gornje polje zalijepite URL slike koju želite primijeniti na vinil i potvrdite pritiskom na Unesi. Možete koristiti vlastitu sliku ili preuzeti onu koja se koristi u ovom primjeru.
Sad biste trebali imati nešto što izgleda ovako.
Prikaz i izvoz
Sad kad je gramofon završen, radit ćemo na načinu na koji je prikazan prije nego što ga izvozimo. Pritisnite Pregled na vrhu okna svojstava. Postavite vrijednost zuma na 200 za prikaz gramofona većim. Da biste uklonili crne obrube oblika, idite na Granice dio okna i postavite neprozirnost na 0. Rezultat bi trebao izgledati otprilike ovako.
Želimo da gramofon svijetli s vrha. Da biste to učinili, zakrenite scenu tako da je vrh gramofona okrenut prema vama. Baza bi trebala izgledati savršeno pravokutna. Promjena vrijednosti svjetla i tame u odjeljku tridiv.com/d/4k6 okna svojstava obnovit će sjene unutar scene. Promijenite vrijednost svjetlosti na 0.
Gramofon je sada spreman za izvoz!
Dovršavanje logotipa
Spremni smo dodati tekst u logotip i stvoriti animaciju logotipa. Pritisnite Uredi na gumbu CodePen u donjem lijevom dijelu prozora Pregled pogled za izvoz koda u CodePen. Važno je napomenuti da CSS kôd koji generira Tridiv ne koristi prefikse dobavljača, pa ćete trebati koristiti alate poput prefixr.com ili leaverou.github.io/prefixfree kako bi kôd funkcionirao u svakom pregledniku. Započnite zatvaranjem okna JavaScript, jer ga nećemo koristiti. U HTML oknu uklonite oznaku stila primijenjenu na .scena div.
Proširite CSS okno i dodajte sljedeći kôd na kraju:
.scene {transformacija: translateY (-140px) rotateX (-55deg); }
Evo, prevediY (-140px) pomiče gramofon 140px prema gore, ostavljajući prostor za tekst ispod njega. Onda rotateX (-55deg) postavlja vertikalni nagib gramofona.
Da biste dodali tekst, morate dodati a .titula div odmah nakon otvaranja #tridiv div u HTML oknu. Unutra dodajte dva obuhvaća> (.glavni naslov i .podnaslov), odvojeno s hr />:
div id = "tridiv"> div> span> TRIDIV / span> hr /> span> SNIMI / raspon> / div> ...
Zatim morate primijeniti ispravne fontove i stilove. U CSS okno uvezite font Open Sans koji se koristi u logotipu i dodajte osnovne stilove za elemente teksta.
@import url (http://fonts.googleapis.com/css?family=Open+Sans:300); / * Centriranje bloka teksta + osnovni stilovi fontova * / title {position: absolute; vrh: 50%; lijevo: 50%; marža: 0 0 0 -165px; širina: 330px; visina: 5em; obitelj fontova: 'Open Sans', sans-serif; težina fonta: 300; veličina fonta: 24px; poravnanje teksta: središte; razmak između slova: 1,5em; boja: # 0099FF; } naslov hr {border: 1px solid # fa7f7a; marža: .75em 0; } raspon naslova {prikaz: blok; } .main-title {font-size: 2.15em; } .subnaslov {uvlaka teksta: .25em; }
Voilà! Vaš logotip je potpun. Trebao bi izgledati otprilike kao slika ispod. Jednom kada je vaš 3D model gotov, možete koristiti snagu CSS-a kako biste ga učinili još boljim dodavanjem stilova, animacija ili događaja miša: samo se prema 3D modelu ponašajte kao prema bilo kojem drugom HTML elementu.
Animirajte logotip
Ovdje pogledajte animaciju pomoću logotipa. Kako dijelovi gramofona "upadaju", svaki od njih dijeli istu animaciju ključnog kadra s različitim kašnjenjima. Oblikima je postavljen atribut top 50%. Da bismo stvorili padajući efekt, animiramo gornji atribut iz -400 piksela do 50%:
@keyframes padaju {0% {top: -400px; } / * Počinjemo s animacijom pozicioniranjem oblika na visinu od 400px * / 100% {top: 50%; } / * onda ga završavamo na prvobitnom položaju * /}
Ovu animaciju možete dodati svim oblicima, kako slijedi:
.shape {vrh: -400px; animacija: pad 1s lakoća 0s naprijed; }
Postavite vrhunski atribut na -400 piksela i dodajte odgodu:
.platter {odgoda animacije: 1,05s; } .disc {odgoda animacije: 1,35s; } .button {odgoda animacije: 1,5s; } ...
Stvorite konačni efekt "odskoka" pomoću rotateX atribut:
90% {transformiraj: translateY (-5em) rotateX (780deg) rotateY (0deg); } 95% {transformiraj: translateY (-4em) rotateX (620deg) rotateY (0deg); } 100% {transformiraj: translateY (-4,5em) rotateX (660deg) rotateY (0deg); }
Tako smo stvorili ovu određenu verziju, ali imajte na umu: nema ograničenja!
Riječi: Julian Garnier
Ovaj se članak izvorno pojavio u izdanju 248 mrežnog časopisa.
