Ustvarite animirani 3D-besedilni učinek

Vsebina

• 01. Zaženite dokument HTML
• 02. Vidna vsebina HTML
• 03. CSS iniciacija
• 04. Animacijski vsebnik
• 05. Začetek animacije
• 06. Animacija v pogled
• 07. Dokončanje animacije

Love Lost by Canada's Jam3 je čudovito temna, za mobilne naprave pripravljena interaktivna pesmica z resničnim srcem o trajnih občutkih okoli izgubljene ljubezni. Postavitev spletnega mesta je bila zgrajena z uporabo HTML5, knjižnica GSAP pa poganja animacijo, ena najbolj vizualno presenetljivih lastnosti pa je animirano 3D besedilo, ki poezijo Love Lost resnično oživi.

• Naredite interaktivne 3D učinke tipografije

Izgleda impresivno hudičevo in ga ni težko vključiti v svoje delo, da bi ustvarili privlačno uporabniško izkušnjo; tukaj je opisano, kako

Bi radi naredili svojo privlačno spletno stran? Preizkusite orodje za ustvarjanje spletnih mest in z ustreznimi storitvami spletnega gostovanja nadaljujte z nemotenim delovanjem.

01. Zaženite dokument HTML

Prvi korak je določitev strukture dokumenta HTML. To vključuje vsebnik HTML, ki sproži dokument, ki vsebuje odseke glave in telesa. Medtem ko se odsek glave uporablja predvsem za nalaganje zunanje datoteke CSS, bo odsek telesa shranil vidno vsebino strani, ustvarjeno v 2. koraku.

! DOCTYPE html> html> head> title> 3D Text Movement / title> link rel = "stylesheet" type = "text / css" href = "styles.css" /> / head> body> * * * KORAK 2 TUKAJ / body> / html>

02. Vidna vsebina HTML

Vidna vsebina HTML je sestavljena iz vsebnika članka, ki vsebuje vidno besedilo. Pomemben del vsebnika članka je atribut 'data-animate', na katerega se bo CSS skliceval za uporabo vizualnih učinkov. Besedilo v članku je narejeno iz oznake h1, ki označuje, da je vsebina glavni naslov strani.

article data-animate = "move in"> h1> Pozdravljeni! / h1> / article>

03. CSS iniciacija

Ustvarite novo datoteko z imenom 'styles.css'. Prvi sklop navodil je določil, da ima vsebnik in telo strani strani črno ozadje, prav tako pa tudi ne vidnega razmika med obrobo. Bela je nastavljena tudi kot privzeta barva besedila za podedovanje vseh podrejenih elementov na strani; izogibanje privzeti črni barvi besedila, zaradi česar je vsebina videti nevidna.

html, body {ozadje: # 000; oblazinjenje: 0; marža: 0; barva: #fff; }

04. Animacijski vsebnik

Vsebnik vsebine, na katerega se sklicuje atribut „data-animate“, ima uporabljene posebne sloge. Njegova velikost je nastavljena tako, da ustreza polni velikosti zaslona z uporabo merskih enot vw in vh, pa tudi rahlo zasukana. Uporabljena je animacija, imenovana 'moveIn', ki bo trajala 20 sekund in se bo ponavljala neskončno.

[data-animate = "move in"] {položaj: relativno; širina: 100vw; višina: 100vh; motnost: 1; animacija: moveIn 20s neskončno; poravnava besedila: sredina; preoblikovanje: vrtenje (20deg); }

05. Začetek animacije

Animacija 'moveIn', na katero se sklicujemo v prejšnjem koraku, zahteva definicijo z uporabo @keyframes. Prvi okvir, ki se začne pri 0% animacije, nastavi privzeto velikost pisave, položaj besedila in vidno senco. Poleg tega je element nastavljen z ničelno motnostjo, tako da je sprva neviden - tj. prikazano zunaj pogleda.

@keyframes moveIn {0% {font-size: 1em; levo: 0; motnost: 0; text-shadow: nobena; } * * * 6. KORAK TUKAJ}

06. Animacija v pogled

Naslednji okvir se z animacijo postavi na 10%. Ta okvir nastavi motnost na popolnoma vidno, zaradi česar se besedilo postopoma animira.Poleg tega so dodane številne sence z modrino in padajočimi barvnimi vrednostmi, da bi besedilo ustvarilo iluzije globine 3D.

10% {motnost: 1; text-shadow: .2em -.2em 4px #aaa, .4em -.4em 4px # 777, .6em -.6em 4px # 444, .8em -.8em 4px # 111; } * * * 7. KORAK TUKAJ

07. Dokončanje animacije

Končni kadri se pojavijo pri 80% in na samem koncu animacije. Ti so odgovorni za povečanje velikosti pisave in premikanje elementa v levo. Nove nastavitve so uporabljene tudi za oživitev sence besedila, hkrati pa tudi besedilo ne vidi iz okvirjev 80% na 100%.

80% {velikost pisave: 8em; levo: -8em; motnost: 1; } 100% {velikost pisave: 10em; levo: -10em; motnost: 0; text-shadow: .02em -.02em 4px #aaa, .04em -.04em 4px # 777, .06em -.06em 4px # 444, .08em -.08em 4px # 111; } * * *

Opomba: ne glede na projekt, s katerim se lotevate, je nujno shranjevanje v oblaku (ki vam bo v pomoč).

Ta članek je bil prvotno objavljen v številki 273 kreativne revije za spletno oblikovanje Web Designer. Kupite številko 273 tukaj ali naročite se na Web Designer tukaj.