Ստեղծեք անիմացիոն 3D տեքստի էֆեկտ

Բովանդակություն

• 01. Նախաձեռնեք HTML փաստաթուղթը
• 02. Տեսանելի HTML բովանդակություն
• 03. CSS- ի նախաձեռնում
• 04. Անիմացիոն տարա
• 05. Անիմացիայի նախաձեռնում
• 06. Կենդանացնել տեսանկյունից
• 07. Անիմացիան ավարտին հասցնելը

Canada's Jam3- ի կողմից կորած սերը գեղեցիկ մութ, բջջային պատրաստ ինտերակտիվ բանաստեղծություն է ՝ իրական սրտով ՝ կորցրած սիրո շուրջ հարատևող զգացմունքների մասին: Վեբ կայքի դասավորությունը ստեղծվել է HTML5- ի միջոցով, GSAP գրադարանի կողմից իր անիմացիան սնուցող, նրա տեսողականորեն առավել վառ առանձնահատկություններից մեկը անիմացիոն 3D տեքստն է, որն իրոք կյանքի է կոչում Love Lost- ի պոեզիան:

• Կատարեք ինտերակտիվ 3D տպագրական էֆեկտներ

Այն տպավորիչ է թվում ՝ դժոխք, և դժվար չէ ներգրավել ձեր սեփական աշխատանքում ՝ գրավիչ օգտագործողի փորձ ստեղծելու համար. ահա թե ինչպես է դա արվում:

Անկանու՞մ եք պատրաստել ձեր սեփական գրավիչ կայքը: Փորձեք վեբ կայք ստեղծող գործիք և շարունակեք սահուն կերպով գործել ՝ ընտրելով ճիշտ վեբ հոստինգի ծառայություն:

01. Նախաձեռնեք HTML փաստաթուղթը

Առաջին քայլը HTML փաստաթղթի կառուցվածքը սահմանելն է: Սա ներառում է HTML կոնտեյները, որը նախաձեռնում է փաստաթուղթը, որը պարունակում է գլխի և մարմնի հատվածներ: Չնայած գլխի բաժինը հիմնականում օգտագործվում է արտաքին CSS ֆայլը բեռնելու համար, մարմնի բաժինը կպահպանի 2-րդ քայլում ստեղծված տեսանելի էջի պարունակությունը:

! DOCTYPE html> html> head> վերնագիր> 3D տեքստի շարժում / վերնագիր> հղում rel = "stylesheet" type = "text / css" href = "styles.css" /> / head> body> * * * STEP 2 ԱՅՍՏԵ / / մարմին> / html>

02. Տեսանելի HTML բովանդակություն

Տեսանելի HTML պարունակությունը բաղկացած է հոդվածի տարայից, որը պարունակում է տեսանելի տեքստ: Հոդվածի տարայի կարևոր մասը «data-animate» հատկանիշն է, որին CSS- ը հղում կտա ՝ տեսողական էֆեկտները կիրառելու համար: Հոդվածի ներսում տեքստը կազմված է h1 պիտակից ՝ ցույց տալու համար, որ բովանդակությունը էջի հիմնական վերնագիրն է:

Article data-animate = "move in"> h1> Ողջույն այնտեղ! / h1> / հոդված>

03. CSS- ի նախաձեռնում

Ստեղծեք նոր ֆայլ, որը կոչվում է 'styles.css': Հրահանգների առաջին հավաքածուն սահմանում է, որ էջի HTML կոնտեյները և մարմինը ունենան սեւ ֆոն, ինչպես նաև տեսանելի չեն սահմանների միջև: Սպիտակը նաև դրվում է որպես տեքստի կանխադրված գույն էջի ժառանգելու բոլոր մանկական տարրերի համար. խուսափելով տեքստի լռելյայն սեւ գույնից, որպեսզի բովանդակությունն անտեսանելի լինի:

html, մարմին {background: # 000; լիցքավորում ՝ 0; լուսանցք ՝ 0; գույնը ՝ #fff; }

04. Անիմացիոն տարա

«Data-animate» հատկանիշով վկայակոչված բովանդակության կոնտեյները կիրառել է հատուկ ոճեր: Դրա չափը սահմանված է այնպես, որ համապատասխանի էկրանի ամբողջ չափսին ՝ օգտագործելով vw և vh չափման միավորներ, ինչպես նաև փոքր-ինչ պտտվող: Կիրառվում է «moveIn» անվանումով անիմացիա, որը կտեւի 20 վայրկյան տևողությամբ և կկրկնվի անվերջ:

[data-animate = "move in"] {դիրքը ՝ հարաբերական; լայնությունը `100vw; բարձրությունը `100vh; անթափանցիկություն ՝ 1; անիմացիա. moveI 20-ականներին անսահման; տեքստի հավասարեցում. կենտրոն; վերափոխել ՝ պտտել (20deg); }

05. Անիմացիայի նախաձեռնում

Նախորդ քայլում նշված «moveIn» անիմացիան պահանջում է սահմանում ՝ օգտագործելով @keyframes: Առաջին կադրը, որը սկսվում է անիմացիայի 0% -ից, սահմանում է լռելյայն տառաչափը, տեքստի դիրքը և տեսանելի ստվերը: Բացի այդ, իրը դրված է զրոյական անթափանցիկությամբ, որպեսզի այն սկզբում անտեսանելի լինի, այսինքն. ցուցադրվում է տեսադաշտից դուրս:

@keyframes moveIn {0% {font-size: 1em; ձախ: 0; անթափանցիկություն ՝ 0; տեքստ-ստվեր `ոչ մեկը; } * * * ՔԱՅԼ 6 ԱՅՍՏԵ}

06. Կենդանացնել տեսանկյունից

Հաջորդ կադրը տեղադրվում է անիմացիայի միջոցով 10% -ով: Այս շրջանակը անթափանցիկությունը դնում է ամբողջովին տեսանելի, ինչի արդյունքում տեքստը աստիճանաբար դիտվում է անիմացիոն:Բացի այդ, բազմաթիվ ստվերներ ավելացվում են կապույտ և նվազող գունային արժեքներով `տեքստի 3D խորության պատրանքները տալու համար:

10% {անթափանցիկություն ՝ 1; text-ստվեր: .2em -.2em 4px #aaa, .4em -.4em 4px # 777, .6em -.6em 4px # 444, .8em -.8em 4px # 111; } * * * ՔԱՅԼ 7 ԱՅՍՏԵ

07. Անիմացիան ավարտին հասցնելը

Վերջնական շրջանակները լինում են անիմացիայի 80% և վերջում: Սրանք պատասխանատու են տառատեսակի չափը մեծացնելու և տարրը դեպի ձախ տեղափոխելու համար: Նոր պարամետրեր են կիրառվում նաև տեքստի ստվերի նկատմամբ ՝ կենդանացնելու համար, միևնույն ժամանակ տեքստը մարում են շրջանակներից ՝ 80% -ից 100%:

80% {font-size: 8em; ձախ: -8em; անթափանցիկություն ՝ 1; } 100% {font-size: 10em; ձախ: -10em; անթափանցիկություն ՝ 0; text-shadow: .02em -.02em 4px #aaa, .04em -.04em 4px # 777, .06em -.06em 4px # 444, .08em -.08em 4px # 111; } * * *

Նշում. Ցանկացած նախագիծ, որը դուք սկսում եք, ամպի պահեստ ունենալը, որը կարող է հաղթահարել, կարևոր է (մեր ուղեցույցը կօգնի):

Այս հոդվածն ի սկզբանե տպագրվել է Web Designer ստեղծագործական վեբ ձևավորման ամսագրի 273 համարում: Գնեք այստեղ 273 համարը կամ բաժանորդագրվել Web Designer- ին այստեղ.