Садржај
- Почетак
- Израда основе грамофона
- Стварање стопала
- Рука и глава
- Боје и текстуре
- Приказивање и извоз
- Завршавање логотипа
- Анимирајте логотип
Постоји неколико начина за стварање 3Д анимације на Интернету, од којих је већини потребно добро познавање ЈаваСцрипт-а и ВебГЛ-а или употреба додатка попут Фласх-а. Захваљујући ЦСС 3Д трансформацијама могуће је креирати 3Д користећи само ХТМЛ и ЦСС, али то није лако учинити. Тридив, моја бесплатна онлајн апликација, поједностављује поступак, нудећи једноставан и интуитиван ВИСИВИГ интерфејс који омогућава корисницима да креирају 3Д објекте без писања иједног реда кода.
У овом упутству ћемо створити и анимирати логотип за „Тридив Рецордс“, измишљену издавачку кућу, користећи само ХТМЛ и ЦСС. Главни визуални логотип биће направљен у 3Д технологији помоћу Тридива. Тада ћемо додати типографске елементе користећи уобичајени ХТМЛ и ЦСС.
Коначну анимацију и код који је генерише можете видети овде.
Почетак
Започећемо са израдом грамофона у 3Д помоћу Тридива. Идите на тридив.цом и покрените апликацију. Мораћете да користите Цхроме, Сафари или Опера 15 (или новији).
Пре почетка, важно је разумети интерфејс Тридив. Главни одељак уређивача састоји се од четири приказа: у горњем левом углу је 3Д приказ, који пружа потпун приказ сцене. Преостала три приказа приказују га одозго, бочно и сприједа. Помоћу ова три приказа можете да креирате, уређујете и премештате 3Д облике.
Хоризонтална трака са алаткама подељена је на два дела: леви део приказује информације које се односе на ваш документ; десни део садржи алате за креирање и уређивање облика. Тхе Потез избор и Уредити тастери за избор пребацују се између различитих начина уређивања.
Окно са својствима (бочна трака) приказује поставке документа као што су зумирање и приближавање мрежи, као и својства изабраног облика (величина, положај, ротација, боја итд.). Јединица која се користи за димензије и положај је емс; углови ротације су у степенима.
Да бисмо избегли забуну касније у водичу, користићемо следећу скраћеницу:
в = ширина х = висина д = пречник дубине = пречник к ступањ = ротација у к-оси и дег = ротација у и-оси з дег = ротација у з-оси
Израда основе грамофона
За почетак подесите вредност зума на 200. Да бисте помогли у цртању облика, активирајте поставку привезивања на мрежу у Подешавања документа одељак бочне траке. Подесите вредност снап-а на 0.125.
Основа грамофона састоји се од једноставног кубоида, па кликните на Додајте коцкасти дугме на горњој траци са алаткама. Требали бисте видети да се кубоид појављује у сва четири приказа у едитору.
Преименујте облик у база користећи поље имена окна својстава (под Својства облика). Име облика мора бити важеће име ЦСС класе јер ће се користити у коду који генерише уређивач. Ова имена класа користићемо касније приликом анимирања логотипа, зато обавезно правилно именујте сваки нови облик.
Једном када је именован кубоид, уверите се да је изабран у приказу одозго (требало би да буде означен плавом бојом, са кружним прстеном алата око њега), а затим кликните на Уредити дугме на врху прстена за приказ ручица за уређивање. Повуците контролне ручке на бочним странама коцкасте површине док не досегну ширину и дубину в = 10 и д = 8 у Својства облика.
Кликните на облик унутар бочног погледа. Ово ће приказати ручке за уређивање у овом приказу, омогућавајући нам да променимо његову висину. Подесите висину док не достигне х = 2. Такође можете да укуцате вредности директно у окно својстава. Да бисте заокружили углове кубоида, промените вредности углова у окну својстава на 1.75, затим притисните [Ентер] тастер за примену промена. Имаћете нешто овако.
Стварање стопала
За ноге грамофона користићемо цилиндре. Додајте цилиндар, а затим промените његов пречник у диам = 1,75 а његова висина до х = 0,5. Кликните на Потез дугме за избор на горњој траци са алаткама за приказ подручја које се може повући на облику. Померите цилиндар испод основе, постављајући га у један од углова. (Можда ће вам требати да га померите у погледима горе, бочно и сприједа.)
Дупликат цилиндра (притисните Дупликат дугме у кружном прстену алата или притисните Д. кључ) и да нови цилиндар преместите у други угао основе. Понављајте поступак док све четири ноге не буду правилно постављене. Не заборавите да наведете цилиндре (на пример, стопала-лево-горе, стопала-десно-врх, стопала-лево-дно, стопала-лево-горе). Када то учините, резултат би требало да изгледа овако.
Сада ћемо размотрити стварање плоче, диска, осе крака и дугмета. Процес стварања следећих облика сличан је оном за стопала. Ево димензија које се користе за различите цилиндре:
плата: диам = 7; х = 0,5 диск: пречник = 6,75; х = 0,25 дугме: пречник = 1,5; х = 0,25 ос-крак-основа: пречник = 2,25; х = 0,25 оса крака: пречник = 1,375; х = 1
Да бисте прочистили странице цилиндара, можете повећати број лица на сваком од њих, користећи поље странице у окну својстава. Не додавајте превише страна, јер то може негативно утицати на глобалне перформансе уређивача и коначну анимацију. У овом случају, саветовао бих вам да не користите више од 32 странице за пладањ и диск. Требао би да имаш овако нешто.
Рука и глава
За руку и главу грамофона користићемо кубоиде. За руку створите коцкасти (в = 0,25; х = 0,25; д = 4), а затим примените ротацију од -33° на оса и. За главу створите коцкасти (в = 0,5; х = 0,5; д = 1), а затим примените ротацију од -33° на оса и. Поравнајте оба облика са цилиндром оси руке. Резултат би требао изгледати овако.
Боје и текстуре
Скоро смо завршили са грамофоном. Последњи корак је додељивање боја и наношење текстуре на винил (слика која представља површину плоче). Да бисте доделили боје, одаберите облик и кликните на боје поље у окну својстава. Тридив вам омогућава да одредите појединачне боје за свако лице облика, али у овом примеру морамо да користимо поље алл да бисмо променили боју свих лица. Да бисте то урадили, само унесите хексадецимални код боје у поље, а затим потврдите притиском на Ентер.
Ево боја које се користе у овом примеру:
база: # 0099ФФ стопала, дугме, ос, рука и глава: # Ф2ЕЕЕ5 диск: # фа7ф7а
За текстуру винила поступак је сличан додељивању боја. Изаберите цилиндар диска, а затим кликните на слике поље у окну својстава. У горње поље залепите УРЛ слике коју желите да примените на винил и потврдите притиском на Ентер. Можете да користите сопствену слику или да преузмете ону која се користи у овом примеру.
Сада бисте требали имати нешто што изгледа овако.
Приказивање и извоз
Сада када је грамофон завршен, радићемо на начину на који је приказан пре него што га извозимо. Кликните Преглед дугме на врху окна са својствима. Подесите вредност зума на 200 за приказ грамофона већи. Да бисте уклонили црне ивице облика, идите на Границе одељак окна и поставите непрозирност на 0. Резултат би требао изгледати отприлике овако.
Желимо да грамофон буде осветљен одозго. Да бисте то урадили, заротирајте сцену тако да је врх грамофона окренут према вама. База би требало да изгледа савршено правоугаона. Промена светлих и тамних вредности у одељку тридив.цом/д/4к6 окна својстава регенерираће сенке унутар сцене. Промените вредност светлости на 0.
Грамофон је сада спреман за извоз!
Завршавање логотипа
Спремни смо да додамо текст у логотип и креирамо анимацију логотипа. Кликните Уредити на тастеру ЦодеПен у доњем левом углу Преглед поглед за извоз кода у ЦодеПен. Важно је напоменути да ЦСС код који генерише Тридив не користи префиксе добављача, па ћете морати да користите алате као што су префикр.цом или леавероу.гитхуб.ио/префикфрее како би код функционисао у сваком прегледачу. Започните затварањем окна ЈаваСцрипт, јер га нећемо користити. У ХТМЛ окну уклоните ознаку стила примењену на .сцена див.
Проширите ЦСС окно и додајте следећи код на крају:
.сцене {трансформ: транслатеИ (-140пк) ротатеКс (-55дег); }
Ево, транслатеИ (-140пк) помера грамофон 140 пиксела нагоре, остављајући простор за текст испод њега. Затим ротатеКс (-55дег) поставља вертикални нагиб грамофона.
Да бисте додали текст, морате додати а .титле див одмах након отварања #тридив див у ХТМЛ окну. Унутра додајте два обухвата> (.главни наслов и .поднаслов), одвојено са хр />:
див ид = "тридив"> див> спан> ТРИДИВ / спан> хр /> спан> РЕЦОРДС / спан> / див>…
Затим морате применити исправне фонтове и стилове. У ЦСС окно увезите фонт Опен Санс који се користи у логотипу и додајте основне стилове за елементе текста.
@импорт урл (хттп://фонтс.гооглеапис.цом/цсс?фамили=Опен+Санс:300); / * Центрирање блока текста + основни стилови фонтова * / титле {поситион: абсолуте; врх: 50%; лево: 50%; маржа: 0 0 0 -165пк; ширина: 330пк; висина: 5ем; породица фонтова: ’Опен Санс’, санс-сериф; тежина фонта: 300; величина фонта: 24пк; поравнање текста: центар; размак између слова: 1,5ем; боја: # 0099ФФ; } наслов хр {бордер: 1пк солид # фа7ф7а; маржа: .75ем 0; } распон наслова {приказ: блок; } .маин-титле {фонт-сизе: 2.15ем; } .суб-наслов {увлака текста: .25ем; }
Воила! Ваш логотип је потпун. Требало би да личи на слику испод. Једном када ваш 3Д модел буде готов, можете користити снагу ЦСС-а да бисте га учинили још бољим додавањем стилова, анимација или догађаја миша: само третирајте 3Д модел као било који други ХТМЛ елемент.
Анимирајте логотип
Погледајте анимацију помоћу логотипа овде. Како делови грамофона „упадају“, сваки од њих дели исту анимацију кључног кадра са различитим кашњењима. Атрибутима облик је постављен врх 50%. Да бисмо створили падајући ефекат, анимирамо врхунски атрибут из -400пк до 50%:
@кеифрамес падају {0% {топ: -400пк; } / * Почињемо анимацију позиционирањем облика на висину од 400пк * / 100% {топ: 50%; } / * онда га завршавамо на првобитном положају * /}
Ову анимацију можете додати свим облицима, како следи:
.схапе {врх: -400пк; анимација: пад 1с лагано 0с напред; }
Поставите врхунски атрибут на -400пк и додајте одлагање:
.платтер {кашњење анимације: 1,05с; } .дисц {одлагање анимације: 1,35 с; } .буттон {кашњење анимације: 1,5с; } ...
Направите коначни ефекат „одбијања“ помоћу ротатеКс атрибут:
90% {трансформација: транслатеИ (-5ем) ротатеКс (780дег) ротатеИ (0дег); } 95% {трансформиши: транслатеИ (-4ем) ротатеКс (620дег) ротатеИ (0дег); } 100% {трансформација: транслатеИ (-4,5ем) ротатеКс (660дег) ротатеИ (0дег); }
Тако смо креирали ову одређену верзију, али имајте на уму: нема ограничења!
Речи: Јулиан Гарниер
Овај чланак се првобитно појавио у издању нет магазина 248.
