Բովանդակություն
- Սկսել
- Պտտվող պտույտի հիմքի ստեղծում
- Ոտքերը ստեղծելը
- Թեւն ու գլուխը
- Գույներ և հյուսվածքներ
- Մատուցում և արտահանում
- Պատկերանշանի ավարտում
- Կենդանացրեք պատկերանշանը
Webանցում 3D անիմացիա ստեղծելու մի քանի եղանակ կա, դրանց մեծ մասը պահանջում է JavaScript- ի և WebGL- ի լավ իմացություն կամ Flash- ի նման plug-in- ի օգտագործում: CSS 3D վերափոխումների շնորհիվ հնարավոր է ստեղծել 3D ՝ օգտագործելով միայն HTML և CSS, բայց դա անելը հեշտ չէ: Tridiv- ը ՝ իմ անվճար առցանց ծրագիրը, հեշտացնում է գործընթացը ՝ առաջարկելով պարզ և ինտուիտիվ WYSIWYG ինտերֆեյս, որը հնարավորություն է տալիս օգտվողներին ստեղծել 3D օբյեկտներ ՝ առանց մեկ տող կոդ գրելու:
Այս ձեռնարկում մենք պատրաստվում և ստեղծում ենք պատկերանշան «Tridiv Records» - ի համար ՝ հորինված ձայնագրության պիտակի համար ՝ օգտագործելով միայն HTML և CSS: Լոգոտիպի հիմնական վիզուալը պատրաստվում է ստեղծել 3D ձևով ՝ օգտագործելով Tridiv- ը: Դրանից հետո մենք կավելացնենք տպագրական տարրերը `օգտագործելով սովորական HTML և CSS:
Վերջնական անիմացիան և այն առաջացնող ծածկագիրը կարող եք տեսնել այստեղ:
Սկսել
Մենք պատրաստվում ենք սկսել ստեղծելով պտտասրահը 3D ձևով ՝ օգտագործելով Tridiv- ը: Անցեք tridiv.com կայք և գործարկեք ծրագիրը: Դուք պետք է օգտագործեք կամ Chrome, Safari կամ Opera 15 (կամ ավելի ուշ):
Սկսելուց առաջ կարևոր է հասկանալ Tridiv ինտերֆեյսը: Խմբագրի հիմնական բաժինը բաղկացած է չորս դիտումներից. Ձախ կողմում վերևում գտնվում է 3D տեսքը, որն ապահովում է տեսարանի ամբողջական տեսքը: Մյուս երեք տեսակետները դա ցույց են տալիս վերեւից, կողքից և առջևից: Օգտագործելով այս երեք դիտումները, դուք կարող եք ստեղծել, խմբագրել և տեղափոխել 3D ձևեր:
Հորիզոնական գործիքագոտին բաժանված է երկու մասի. Ձախ մասում ցուցադրվում են ձեր փաստաթղթին վերաբերող տեղեկությունները. աջ մասը պարունակում է ձևեր ստեղծելու և խմբագրելու գործիքներ: Ի Շարժվել ընտրություն և Խմբագրել ընտրության կոճակները փոխվում են խմբագրման տարբեր ռեժիմների միջև:
Հատկությունների պատուհանը (կողային սյունը) ցուցադրում է փաստաթղթի կարգավորումները, ինչպիսիք են խոշորացումը և ցանցից սեղմելը, և ընտրված ձևի հատկությունները (չափը, դիրքը, պտտումը, գույնը և այլն): Չափերի և դիրքի համար օգտագործվող միավորը ems- ն է. ռոտացիայի անկյունները աստիճաններով են:
Ձեռնարկի հետագա շփոթմունքներից խուսափելու համար մենք կօգտագործենք հետևյալ սղագրությունը.
w = լայնություն h = բարձրություն d = խորություն diam = տրամագիծ x deg = ռոտացիա x առանցքում y deg = ռոտացիա y առանցքում z deg = ռոտացիա z առանցքում
Պտտվող պտույտի հիմքի ստեղծում
Սկսեք մեծացման մեծությունը դնելով 200-ով: Ձևերը նկարելուն օգնելու համար ակտիվացրեք ցանցի սեղմման ցանցի կարգավորումը Փաստաթղթի կարգավորումներ կողային տողի հատված: Սահմանեք snap արժեքը որպես 0.125.
Պտտվող սկավառակի հիմքը բաղկացած է պարզ խորանարդից, այնպես որ կտտացրեք այն Ավելացնել խորանարդ կոճակը վերևի գործիքագոտում: Դուք պետք է տեսնեք, որ խորանարդը հայտնվում է խմբագրի բոլոր չորս դիտումներում:
Վերանվանել ձևը հիմք օգտագործելով հատկությունների պատուհանի անվան դաշտը (տակ Ձևի հատկությունները) Ձևի անվանումը պետք է լինի վավեր CSS դասի անվանում, քանի որ այն կօգտագործվի խմբագրի կողմից առաջացած կոդում: Լոգոն կենդանացնելու ժամանակ մենք հետագայում կօգտագործենք այս դասի անունները, այնպես որ համոզվեք, որ ճիշտ եք անվանում ձեր ստեղծած յուրաքանչյուր նոր ձև:
Երբ ձագը անվանակոչվի, համոզվեք, որ այն ընտրված է վերին տեսանկյունից (այն պետք է ընդգծվի կապույտով, շուրջը ՝ գործիքների շրջանաձեւ օղակով), ապա կտտացրեք Խմբագրել կոճակը մատանի վերևում ՝ խմբագրման բռնակները ցույց տալու համար: Քաշեք հսկիչ բռնակները խորանարդի կողմերում, մինչև լայնությունը և խորությունը հասնեն w = 10 և d = 8 մեջ Ձևի հատկությունները.
Կտտացրեք կողմնակի տեսքի ներսում գտնվող ձևին: Սա ցույց կտա խմբագրման բռնակները այս տեսանկյունից ՝ թույլ տալով մեզ փոխել դրա բարձրությունը: Կարգավորեք բարձրությունը, մինչեւ այն հասնի h = 2, Կարող եք նաև արժեքներ մուտքագրել անմիջապես հատկությունների պատուհանում: Խորանոցի անկյունները կլորացնելու համար փոխեք անկյունների արժեքները հատկությունների պատուհանում դեպի 1.75, ապա սեղմեք [Մուտքագրեք] փոփոխությունները կիրառելու բանալին: Դուք կունենաք այսպիսի մի բան:
Ոտքերը ստեղծելը
Պտուտահաստոցի ոտքերի համար մենք պատրաստվում ենք օգտագործել բալոններ: Ավելացրեք գլան, ապա փոխեք դրա տրամագիծը տրամագիծ = 1,75 և դրա բարձրությունը դեպի h = 0,5, Սեղմիր Շարժվել ընտրության կոճակը վերևի գործիքագոտում ՝ ձևի վրա քաշվող տարածքը ցույց տալու համար: Տեղափոխեք գլանը հիմքի տակ, տեղադրելով այն անկյուններից մեկում: (Գուցե անհրաժեշտ լինի այն տեղափոխել վերին, կողային և առջևի տեսարաններում):
Կրկնօրինակեք գլանը (սեղմեք այն Կրկնօրինակեք գործիքների շրջանաձեւ օղակում կոճակը կամ սեղմել Դ բանալին) և տեղափոխել նոր գլանը հիմքի մեկ այլ անկյուն: Կրկնեք գործընթացը մինչև բոլոր չորս ոտքերը ճիշտ տեղադրվեն: Մի մոռացեք անվանել բալոններ (օրինակ, ոտքեր-ձախ-վերև, ոտքեր-աջ-վերև, ոտքեր-ձախ-ներքև, ոտքեր-ձախ-վերև) Երբ դա անեք, արդյունքը պետք է լինի այսպիսին:
Այժմ մենք կանդրադառնանք սկուտեղի, սկավառակի, թևի առանցքի և կոճակի ստեղծմանը: Հաջորդ ձևերի ստեղծման գործընթացը նման է ոտքերի համար: Ահա տարբեր բալոնների համար օգտագործվող չափերը.
սկուտեղ ՝ diam = 7; h = 0,5 սկավառակ ՝ diam = 6,75; h = 0,25 կոճակ. diam = 1,5; h = 0,25 թև-առանցք-հիմք. տրամագիծ = 2,25; h = 0,25 թևի առանցք. տրամագիծ = 1,375; h = 1
Մխոցների կողմերը զտելու համար կարող եք յուրաքանչյուրի մեջ ավելացնել դեմքերի քանակը ՝ հատկությունների պատուհանում օգտագործելով կողմերի դաշտը: Մի ավելացրեք շատ կողմեր, քանի որ դա կարող է բացասաբար ազդել խմբագրի և վերջին անիմացիայի համաշխարհային կատարման վրա: Այս դեպքում ես խորհուրդ կտամ ձեզ օգտագործել սկուտեղի և սկավառակի 32-ից ավելի կողմերը: Դուք պետք է ունենաք նման մի բան:
Թեւն ու գլուխը
Պտտաձողի թեւի և գլխի համար մենք պատրաստվում ենք օգտագործել խորանարդներ: Թևի համար ստեղծեք խորանարդ (w = 0,25; h = 0,25; դ = 4), ապա կիրառեք ռոտացիա -33° վրա y առանցք, Գլխի համար ստեղծեք խորանարդ (w = 0,5; h = 0,5; դ = 1), ապա կիրառեք ռոտացիա -33° վրա y առանցք, Երկու ձևերը հավասարեցրեք թևի առանցքի գլանով: Արդյունքն այսպիսին պետք է լինի:
Գույներ և հյուսվածքներ
Մենք գրեթե ավարտեցինք պտտաձողի աշխատանքը: Վերջին քայլը գույները նշանակելն է և վինիլին (ձայնագրության մակերեսը ներկայացնող պատկեր) կիրառել հյուսվածք: Գույներ նշանակելու համար ընտրեք ձև և կտտացրեք այն գույներ դաշտը հատկությունների պատուհանում: Tridiv- ը թույլ է տալիս ձեզ որոշել յուրաքանչյուր գույի ձևի յուրաքանչյուր դեմքի համար, բայց այս օրինակում մենք պետք է օգտագործենք բոլոր դաշտը `բոլոր դեմքերի գույնը փոխելու համար: Դա անելու համար պարզապես դաշտում մուտքագրեք վեցանկյուն գույնի կոդ, ապա հաստատեք ՝ սեղմելով Մտեք.
Ահա այս օրինակում օգտագործված գույները.
հիմք ՝ # 0099FF ոտք, կոճակ, առանցք, թև և գլուխ: # F2EEE5 սկավառակ ՝ # fa7f7a
Վինիլային հյուսվածքի համար գործընթացը նման է գույների նշանակմանը: Ընտրեք սկավառակի բալոնը, ապա կտտացրեք այն պատկերներ դաշտը հատկությունների պատուհանում: Վերին դաշտում տեղադրեք այն պատկերի URL- ը, որը ցանկանում եք կիրառել վինիլի վրա և հաստատել ՝ սեղմելով Մտեք, Կարող եք օգտագործել ձեր սեփական պատկերը կամ ներբեռնել այս օրինակում օգտագործված պատկերը:
Այժմ դուք պետք է ունենաք այսպիսի տեսք ունեցող մի բան:
Մատուցում և արտահանում
Այժմ, երբ պտտասրահն ավարտված է, մենք պատրաստվում ենք աշխատել այն արտահանելու եղանակով, որով այն ներկայացվել է: Սեղմիր Նախադիտում հատկությունների պատուհանի վերևի կոճակը: Մեծացնելու արժեքը սահմանեք որպես 200 ավելի մեծ ցուցադրել պտտաձողը: Ձևերի սեւ սահմանները հանելու համար անցեք Սահմաններ պատուհանի հատվածը և անթափանցիկությունը դնել որպես 0, Արդյունքն այսպիսի տեսք պետք է ունենա:
Մենք ուզում ենք, որ պտտասրահը վառվի վերևից: Դա անելու համար տեսարանը պտտեցրեք այնպես, որ պտտասրահի գագաթը դեպի ձեզ լինի: Հիմքը պետք է կատարյալ ուղղանկյուն տեսք ունենա: Tridiv.com/d/4k6 հատկությունների պատուհանի լույսի և մութ արժեքների փոփոխությունը կվերածնի ստվերը տեսարանի ներսում: Լույսի արժեքը փոխեք 0.
Պտտաձողն այժմ պատրաստ է արտահանման:
Պատկերանշանի ավարտում
Մենք պատրաստ ենք տեքստը ավելացնել պատկերանշանին և ստեղծել պատկերանշանի անիմացիա: Սեղմիր Խմբագրել CodePen կոճակի վրա ՝ ներքևի ներքևի ձախ մասում Նախադիտում դիտել կոդը CodePen- ին արտահանելու համար: Կարևոր է նշել, որ Tridiv- ի կողմից ստեղծված CSS ծածկագիրը չի օգտագործում վաճառողի նախածանցներ, ուստի յուրաքանչյուր զննարկչում կոդը գործունակ դարձնելու համար հարկավոր է օգտագործել այնպիսի գործիքներ, ինչպիսիք են prefixr.com կամ leaverou.github.io/prefixfree: Սկսեք փակելով JavaScript պատուհանը, քանի որ մենք այն չենք օգտագործելու: HTML պատուհանում հանեք ոճի պիտակը, որը կիրառվել է .բեմ div
Ընդարձակեք CSS- ի պատուհանը և վերջում ավելացրեք հետևյալ ծածկագիրը.
.scene {transform: translateY (-140px) rotateX (-55deg); }
Այստեղ թարգմանել Y (-140 px)) պտտաձողը տեղափոխում է 140px վերև, տեղ թողնելով տեքստի տակ: Հետո rotateX (-55deg) սահմանում է պտտաձողի ուղղահայաց թեքությունը:
Տեքստը ավելացնելու համար հարկավոր է ավելացնել .կոչում div անմիջապես բացումից հետո # տրիդիվ div- ը HTML պատուհանում: Ներսում ավելացրեք երկուսը ընդգրկում է> (. հիմնական վերնագիր և. ենթավերնագիր), առանձնացված ըստ ժամ />:
div id = "tridiv"> div> span> TRIDIV / span> hr /> span> RECORDS / span> / div>
Դրանից հետո դուք պետք է կիրառեք ճիշտ տառատեսակներ և ոճեր: CSS պատուհանում ներմուծեք լոգոտիպում օգտագործվող Open Sans տառատեսակը և տեքստի տարրերի համար ավելացրեք հիմնական ոճերը:
@import url (http://fonts.googleapis.com/css?family=Open+Sans:300); / * Տեքստի բլոկի կենտրոնացում + տառատեսակի հիմնական ոճեր * / վերնագիր {դիրքը ՝ բացարձակ; վերև ՝ 50%; մնացել է ՝ 50%; լուսանցք ՝ 0 0 0 -165px; լայնությունը `330 px; բարձրությունը ՝ 5em; font-family: 'Open Sans', sans-serif; տառատեսակի քաշը ՝ 300; տառատեսակի չափը ՝ 24px; տեքստի հավասարեցում. կենտրոն; նամակների միջև հեռավորությունը `1.5em; գույնը `# 0099FF; } վերնագիր hr {border: 1px solid # fa7f7a; լուսանցք ՝ .75em 0; } title span {display: block; } .main-title {font-size: 2.15em; }. ենթավերնագիր {text-indent: .25em; }
Voilà! Ձեր լոգոն ամբողջական է: Այն պետք է նման լինի ներքևի պատկերին: Ձեր 3D մոդելն ավարտելուց հետո կարող եք օգտագործել CSS- ի ուժը ՝ այն էլ ավելի լավացնելու համար ՝ ավելացնելով ոճեր, անիմացիաներ կամ մկնիկի իրադարձություններ. Պարզապես վերաբերվեք 3D մոդելին ինչպես ցանկացած այլ HTML տարրերի:
Կենդանացրեք պատկերանշանը
Տեսեք պատկերապատկերով անիմացիան այստեղ: Երբ պտտաձողի մասերը «ընկնում են», նրանցից յուրաքանչյուրը կիսում է նույն keyframe անիմացիան ՝ տարբեր ուշացումներով: Ձևերը սահմանված են վերևի հատկանիշի վրա 50%, Ընկնող էֆեկտ ստեղծելու համար մենք կենդանիացնում ենք վերին հատկանիշը -400 հատ դեպի 50%:
@keyframes անկում {0% {top: -400px; } / * Մենք սկսում ենք անիմացիան ՝ դիրքը ձևավորելով 400 px * / 100% բարձրության վրա {վերև ՝ 50%; } / * ապա այն ավարտում ենք սկզբնական դիրքում * /}
Այս անիմացիան կարող եք ավելացնել բոլոր ձևերին ՝ հետևյալ կերպ.
.ձև {վերևում ՝ -400 էջ; անիմացիա. Fall 1s հեշտ 0s հարձակվողներ; }
Վերին հատկանիշը դնել -400 հատ և ավելացնել հետաձգում.
.platter {անիմացիա-հետաձգում. 1.05 վ; } .disc {անիմացիա-հետաձգում `1.35 վ; }. կոճակ {անիմացիա-հետաձգում `1.5 վ; } ...
Ստեղծեք վերջնական «ցատկման» էֆեկտ ՝ օգտագործելով պտտել X հատկանիշ:
90% {փոխակերպել. TranslateY (-5em) rotateX (780deg) rotateY (0deg); } 95% {transform: translateY (-4em) rotateX (620deg) rotateY (0deg); } 100% {վերափոխել. TranslateY (-4.5em) rotateX (660deg) rotateY (0deg); }
Ահա թե ինչպես ենք մենք ստեղծել այս հատուկ տարբերակը, բայց հիշեք. Որևէ սահմանափակում չկա:
Բառեր Julուլիան Գարնիե
Այս հոդվածն ի սկզբանե հայտնվել է զուտ ամսագրի 248 համարում:
