Përmbajtje
- Fillimi
- Krijimi i bazës së rrotullës
- Krijimi i këmbëve
- Krahu dhe koka
- Ngjyrat dhe teksturat
- Paraqitja dhe eksportimi
- Përfundimi i logos
- Gjallëroni logon
Ka disa mënyra për të krijuar animacion 3D në internet, shumica e tyre kërkojnë një njohuri të mirë të JavaScript dhe WebGL, ose përdorimin e një shtojce si Flash. Falë transformimeve 3D të CSS, është e mundur të krijoni 3D duke përdorur vetëm HTML dhe CSS, por nuk është e lehtë ta bësh këtë. Tridiv, aplikacioni im falas në internet, thjeshton procesin, duke ofruar një ndërfaqe të thjeshtë dhe intuitive WYSIWYG që u mundëson përdoruesve të krijojnë objekte 3D pa shkruar një rresht të vetëm të kodit.
Në këtë udhëzim, ne do të krijojmë dhe gjallërojmë një logo për 'Tridiv Records', një etiketë rekord rekord, duke përdorur vetëm HTML dhe CSS. Pamja kryesore për logon do të krijohet në 3D duke përdorur Tridiv. Pastaj do të shtojmë elementet tipografike duke përdorur HTML dhe CSS të rregullt.
Mund të shihni animacionin përfundimtar dhe kodin që e gjeneron këtu.
Fillimi
Ne do të fillojmë duke krijuar rrotullën në 3D duke përdorur Tridiv. Drejtohuni tek tridiv.com dhe filloni aplikacionin. Do të duhet të përdorni Chrome, Safari ose Opera 15 (ose më vonë).
Para fillimit, është e rëndësishme të kuptoni ndërfaqen Tridiv. Seksioni kryesor i redaktorit është i përbërë nga katër pamje: në të majtë sipër është pamja 3D, duke siguruar një pamje të plotë të skenës. Tre pamjet e tjera e tregojnë atë nga lart, anash dhe përpara. Duke përdorur këto tre pamje, ju mund të krijoni, modifikoni dhe lëvizni forma 3D.
Shiriti horizontal i veglave është i ndarë në dy pjesë: pjesa e majtë tregon informacionin në lidhje me dokumentin tuaj; pjesa e duhur përmban mjete për krijimin dhe redaktimin e formave. Lëviz zgjedhja dhe Redakto butonat e zgjedhjes kalojnë midis mënyrave të ndryshme të redaktimit.
Paneli i vetive (shiriti anësor) tregon cilësimet e dokumentit si zmadhimi dhe kapja në rrjetë, dhe vetitë e formës së zgjedhur (madhësia, pozicioni, rrotullimi, ngjyra, etj.). Njësia e përdorur për dimensionet dhe pozicionin është ems; këndet e rrotullimit janë në gradë.
Për të shmangur ndonjë konfuzion më vonë në tutorial, ne do të përdorim stenografinë e mëposhtme:
w = gjerësia h = lartësia d = thellësia diam = diametri x deg = rrotullimi në boshtin x y deg = rrotullimi në boshtin y z deg = rrotullimi në boshtin z
Krijimi i bazës së rrotullës
Filloni duke vendosur vlerën e zmadhimit në 200. Për të ndihmuar në vizatimin e formave, aktivizoni cilësimin e kapjes në rrjetë në Cilësimet e dokumentit seksioni i shiritit anësor. Vendosni vlerën e parakohshme në 0.125.
Baza e rrotullës është e përbërë nga një kuboid i thjeshtë, prandaj klikoni në Shtoni kuboid butoni në shiritin e sipërm të veglave. Ju duhet të shihni kuboidin të shfaqet në të katër pamjet në redaktor.
Riemërtoni formën në baze duke përdorur fushën e emrit të panelit të vetive (nën Karakteristikat e formës) Emri i formës duhet të jetë një emër i vlefshëm i klasës CSS sepse do të përdoret në kodin e gjeneruar nga redaktori. Ne do t'i përdorim këto emra të klasave më vonë kur animojmë logon, prandaj sigurohuni që të emëroni çdo formë të re që krijoni siç duhet.
Pasi të quhet kuboidi, sigurohuni që të jetë zgjedhur në pamjen e sipërme (duhet të theksohet me ngjyrë blu, me një unazë rrethore mjetesh rreth tij), pastaj klikoni në Redakto butoni në krye të unazës për të treguar dorezat e redaktimit. Zvarritni dorezat e kontrollit në anët e kuboidit, derisa të arrijnë gjerësia dhe thellësia w = 10 dhe d = 8 në Karakteristikat e formës.
Klikoni në formën brenda pamjes anësore. Kjo do të tregojë dorezat e redaktimit në këtë pamje, duke na lejuar të ndryshojmë lartësinë e saj. Rregulloni lartësinë derisa të arrijë h = 2. Ju gjithashtu mund të shtypni vlera direkt në panelin e vetive. Për të rrumbullakosur qoshet e kuboidit, ndryshoni vlerat e qosheve në panelin e vetive 1.75, pastaj shtypni butonin [Hyni] çelësi për të zbatuar ndryshimet. Do të keni diçka të tillë.
Krijimi i këmbëve
Për këmbët e gramafonit, ne do të përdorim cilindra. Shtoni një cilindër, pastaj ndryshoni diametrin e tij në diam = 1.75 dhe lartësia e saj për të h = 0,5. Klikoni në Lëviz butoni i zgjedhjes në shiritin e sipërm të veglave për të treguar zonën që tërhiqet nga forma. Lëvizni cilindrin nën bazën, duke e vendosur atë në një nga qoshet. (Mund të jetë e nevojshme ta zhvendosni atë në pamjet e sipërme, anësore dhe të përparme.)
Dublikoni cilindrin (shtypni butonin Dublikatë butonin në unazën rrethore të mjeteve ose shtypni butonin D çelësi) dhe për të lëvizur cilindrin e ri në një cep tjetër të bazës. Përsëriteni procesin derisa të katër pozicionet të jenë pozicionuar si duhet. Mos harroni të emëroni cilindrat (për shembull, këmbët-majtas-lart, këmbët-djathtas-lart, këmbët-majtas-fund, këmbët-majtas-lart) Kur ta keni bërë atë, rezultati duhet të duket kështu.
Tani do të shohim krijimin e pjatës, diskut, boshtit të krahut dhe butonit. Procesi për krijimin e formave të radhës është i ngjashëm me atë për këmbët. Këtu janë dimensionet e përdorura për cilindra të ndryshëm:
pjata: diam = 7; h = 0,5 disk: diam = 6,75; butoni h = 0,25: diam = 1,5; h = 0,25 baza e boshtit të krahut: diam = 2,25; h = 0,25 boshti i krahut: diam = 1,375; h = 1
Për të rafinuar anët e cilindrave, mund të rritni numrin e faqeve në secilin, duke përdorur fushën e anëve në panelin e vetive. Mos shtoni shumë anë pasi kjo mund të ndikojë negativisht në performancën globale të redaktorit dhe animacionin përfundimtar. Në këtë rast, unë do t'ju këshilloja të mos përdorni më shumë se 32 anë për pjatën dhe diskun. Duhet të kesh diçka të tillë.
Krahu dhe koka
Për krahun dhe kokën e rrotullës, ne do të përdorim kuboide. Për krahun, krijoni një kuboid (w = 0,25; h = 0,25; d = 4), pastaj aplikoni një rrotullim të -33° në boshti y. Për kokën, krijoni një kuboid (w = 0,5; h = 0,5; d = 1), pastaj aplikoni një rrotullim të -33° në boshti y. Drejtoni të dyja format me cilindrin me boshtin e krahut. Rezultati duhet të duket kështu.
Ngjyrat dhe teksturat
Kemi mbaruar pothuajse me rrotullën. Hapi i fundit është caktimi i ngjyrave dhe aplikimi i një strukture në vinil (një imazh që përfaqëson sipërfaqen e rekordit). Për të caktuar ngjyrat, zgjidhni një formë dhe klikoni në ngjyrat fushë në panelin e pronave. Tridiv ju lejon të specifikoni ngjyrat individuale për secilën fytyrë të një forme, por, në këtë shembull, ne duhet të përdorim fushën e të gjithë për të ndryshuar ngjyrën e të gjitha fytyrave. Për ta bërë këtë, thjesht fusni një kod me ngjyra magji në fushë, pastaj konfirmoni duke shtypur Hyj.
Këtu janë ngjyrat e përdorura në këtë shembull:
baza: # 0099FF këmbët, butoni, boshti, krahu dhe koka: # disku F2EEE5: # fa7f7a
Për strukturën e vinilit, procesi është i ngjashëm me caktimin e ngjyrave. Zgjidhni cilindrin e diskut, pastaj klikoni në imazhe fushë në panelin e pronave. Ngjitni URL-në e figurës që dëshironi të aplikoni në vinil në fushën e sipërme dhe konfirmoni duke shtypur Hyj. Mund të përdorni një imazh tuajin ose të shkarkoni atë që përdoret në këtë shembull.
Tani duhet të keni diçka që duket si kjo.
Paraqitja dhe eksportimi
Tani që pllaka e rrotullimit është bërë, ne do të punojmë në mënyrën në të cilën është dhënë para se ta eksportojmë. Klikoni në Paraqitje butoni në krye të panelit të pronave. Vendosni vlerën e zmadhimit në 200 për të shfaqur gramafonin më të madh. Për të hequr kufijtë e zi të formave, shkoni te Kufijtë seksioni i panelit dhe vendosni perde në 0. Rezultati duhet të duket diçka e tillë.
Ne duam që gramafoni të ndizet nga maja. Për ta bërë këtë, rrotulloni skenën në një mënyrë të tillë që maja e rrotullës të drejtohet nga ju. Baza duhet të duket në mënyrë të përkryer drejtkëndëshe. Ndryshimi i vlerave të dritës dhe errësirës në pjesën tridiv.com/d/4k6 të panelit të vetive do të rigjenerojë hijet brenda skenës. Ndryshoni vlerën e dritës në 0.
Diapraniumi tani është gati për të eksportuar!
Përfundimi i logos
Ne jemi gati të shtojmë tekstin në logo dhe të krijojmë animacionin e logos. Klikoni në Redakto në butonin CodePen në pjesën e poshtme të majtë të Paraqitje pamje për të eksportuar kodin në CodePen. Importantshtë e rëndësishme të theksohet se kodi CSS i gjeneruar nga Tridiv nuk përdor parashtesa të shitësit, kështu që do të duhet të përdorni mjete si prefixr.com ose leaverou.github.io/prefixfree në mënyrë që ta bëni kodin funksional në çdo shfletues. Filloni duke mbyllur panelin JavaScript, pasi nuk do ta përdorim. Në panelin HTML, hiqni etiketën e stilit të aplikuar në . skena div
Zgjero panelin CSS dhe shto kodin vijues në fund:
. skena {transformoj: përkthej Y (-140px) rrotulloj X (-55deg); }
Këtu, përkthejY (-140 px) lëviz gramafonin 140px lart, duke i lënë hapësirë tekstit nën të. Pastaj rotateX (-55deg) vendos pjerrësinë vertikale të rrotullës.
Për të shtuar tekstin, duhet të shtoni një .titulli div menjëherë pas hapjes #tridiv div në panelin HTML. Brenda, shtoni dy shtrihet> (.themelit kryesor dhe .nën titullit), të ndara nga orë />:
div id = "tridiv"> div> span> TRIDIV / span> hr /> span> RECORDS / span> / div>
Pastaj ju duhet të aplikoni gërmat dhe stilet e sakta. Në panelin CSS, importoni fontin Open Sans të përdorur në logo dhe shtoni stilet themelore për elementet e tekstit.
url @import (http://fonts.googleapis.com/css?family=Open+Sans:300); / * Qendërzimi i bllokut të tekstit + stilet themelore të shkronjave * / titulli {pozicioni: absolut; maja: 50%; majtas: 50%; marzhi: 0 0 0 -165px; gjerësia: 330px; lartësia: 5em; font-family: 'Open Sans', sans-serif; pesha e shkronjave: 300; madhësia e shkronjave: 24px; rreshtimi i tekstit: qendra; ndarja e shkronjave: 1.5em; ngjyra: # 0099FF; } titulli hr {kufiri: 1px solid # fa7f7a; diferencë: .75em 0; } title span {display: block; } .main-title {font-size: 2.15em; }. nëntitulli {text-indent: .25em; }
Voilà! Logoja juaj është e plotë. Duhet të duket diçka si imazhi më poshtë. Sapo të përfundojë modeli juaj 3D, mund të përdorni fuqinë e CSS për ta bërë atë edhe më të mirë duke shtuar stile, animacione ose ngjarje të miut: thjesht trajtoni modelin 3D si çdo element tjetër HTML.
Gjallëroni logon
Shihni një animacion duke përdorur logon këtu. Ndërsa pjesët e rrotullës 'bien', secila prej tyre ndan të njëjtën animacion të kornizës kryesore me vonesa të ndryshme. Format kanë vendosur atributin e sipërm 50%. Për të krijuar efektin në rënie, ne gjallërojmë atributin kryesor nga -400 px te 50%:
@keyframes bien {0% {top: -400px; } / * Ne fillojmë animacionin duke pozicionuar formën në një lartësi prej 400px * / 100% {lart: 50%; } / * atëherë e përfundojmë në pozicionin e tij origjinal * /}
Mund ta shtoni këtë animacion në të gjitha format, si më poshtë:
.forma {top: -400px; animacion: bie 1s lehtëson 0s përpara; }
Vendosni atributin e lartë në -400 px dhe shtoni një vonesë:
.platter {animacion-vonesë: 1.05s; } .disk {animacion-vonesë: 1.35s; } .button {animacion-vonesë: 1.5s; } ...
Krijoni efektin përfundimtar 'kërcim' duke përdorur rrotullohenX atribut:
90% {transform: translateY (-5em) rotateX (780deg) rotateY (0deg); } 95% {transform: translateY (-4em) rotateX (620deg) rotateY (0deg); } 100% {transform: translateY (-4.5em) rotateX (660deg) rotateY (0deg); }
Kështu e krijuam këtë version të veçantë, por mos harroni: nuk ka kufij!
Fjalët: Julian Garnier
Ky artikull fillimisht u shfaq në numrin e revistës net 248.
