Turinys
- 01. Inicijuokite HTML dokumentą
- 02. Matomas HTML turinys
- 03. CSS inicijavimas
- 04. Animacijos talpykla
- 05. Animacijos iniciacija
- 06. Animuoti į vaizdą
- 07. Animacijos užbaigimas
Kanados „Jam3“ pamestas „Meilė prarasta“ yra gražiai tamsus, mobiliesiems pritaikytas interaktyvus eilėraštis su tikra širdimi apie patiriamus jausmus dėl prarastos meilės. Svetainės išdėstymas buvo sukurtas naudojant HTML5, o GSAP biblioteka valdo jos animaciją. Viena iš vizualiai ryškiausių jo funkcijų yra animuotas 3D tekstas, kuris iš tikrųjų atgaivina „Love Lost“ poeziją.
- Sukurkite interaktyvius 3D tipografijos efektus
Tai atrodo kaip pragaras įspūdinga, ir tai nėra sunku įtraukti į savo darbą, kad būtų sukurta patraukli vartotojo patirtis; štai kaip tai daroma.
Norite sukurti savo patrauklią svetainę? Išbandykite svetainių kūrimo įrankį ir užtikrinkite, kad viskas vyktų sklandžiai, pasirinkdami tinkamą interneto prieglobos paslaugą.
01. Inicijuokite HTML dokumentą
Pirmiausia reikia apibrėžti HTML dokumento struktūrą. Tai apima HTML sudėtinį rodinį, kuris inicijuoja dokumentą, kuriame yra galvos ir turinio skiltys. Nors antraštės skiltis pirmiausia naudojama išoriniam CSS failui įkelti, kūno dalyje bus saugomas matomas puslapio turinys, sukurtas atlikus 2 veiksmą.
! DOCTYPE html> html> head> title> 3D teksto judėjimas / pavadinimas> link rel = "stylesheet" type = "text / css" href = "styles.css" /> / head> body> * * * ŽINGSNIS 2 ČIA / body> / html>
02. Matomas HTML turinys
Matomą HTML turinį sudaro straipsnių talpykla, kurioje yra matomas tekstas. Svarbi straipsnių talpyklos dalis yra atributas „data-animate“, į kurį CSS nurodys vaizdo efektus. Straipsnyje pateiktas tekstas yra sudarytas iš žymos „h1“, nurodant, kad turinys yra pagrindinis puslapio pavadinimas.
straipsnis data-animate = "move in"> h1> Sveiki! / h1> / straipsnis>
03. CSS inicijavimas
Sukurkite naują failą pavadinimu „styles.css“. Pirmasis instrukcijų rinkinys nustato, kad puslapio HTML sudėtiniame rodinyje ir tekste būtų juodas fonas, taip pat nebūtų matomų sienų tarpų. Balta taip pat nustatyta kaip numatytoji teksto spalva visiems paveldimiems puslapio elementams; vengiant numatytosios juodos spalvos teksto, turinys atrodo nematomas.
HTML, body {background: # 000; užpildas: 0; paraštė: 0; spalva: #fff; }
04. Animacijos talpykla
Turinio sudėtiniame rodinyje, nurodytame atribute „data-animate“, taikomi konkretūs stiliai. Jo dydis nustatomas taip, kad atitiktų visą ekrano dydį, naudojant vw ir vh matavimo vienetus, taip pat šiek tiek pasukamas. Taikoma animacija, vadinama „moveIn“, kuri truks 20 sekundžių ir kartosis be galo.
[data-animate = "judėti"] {pozicija: santykinis; plotis: 100vw; aukštis: 100vh; neskaidrumas: 1; animacija: moveIn 20s begalinis; text-align: centre; transformuoti: pasukti (20 laipsnių); }
05. Animacijos iniciacija
Ankstesniame etape nurodytai „moveIn“ animacijai reikalingas apibrėžimas naudojant @keyframes. Pirmasis kadras, prasidedantis 0% animacijos, nustato numatytąjį šrifto dydį, teksto išdėstymą ir matomą šešėlį. Be to, elementas nustatomas su nuline neskaidrumu, kad jis iš pradžių būtų nematomas - t. rodomas ne matomoje vietoje.
@keyframes moveIn {0% {font-size: 1em; kairėje: 0; neskaidrumas: 0; teksto šešėlis: nėra; } * * * 6 ŽINGSNIS ČIA}
06. Animuoti į vaizdą
Kitas animacijos kadras bus 10%. Šis rėmelis nustato neskaidrumą iki visiškai matomo, todėl tekstas palaipsniui animuojamas į rodinį.Be to, pridedami keli šešėliai su mėlynomis ir mažėjančiomis spalvų reikšmėmis, kad tekstui būtų suteiktos 3D gylio iliuzijos.
10% {neskaidrumas: 1; teksto šešėlis: .2em -.2em 4px #aaa, .4em -.4em 4px # 777, .6em -.6em 4px # 444, .8em -.8em 4px # 111; } * * * 7 ŽINGSNIS ČIA
07. Animacijos užbaigimas
Galutiniai kadrai būna 80% ir pačiame animacijos gale. Jie atsakingi už šrifto dydžio padidinimą ir elemento perkėlimą kairės link. Nauji parametrai taip pat taikomi teksto šešėliui, kad būtų galima animuoti, o tekstas išnyksta iš rėmų nuo 80% iki 100%.
80% {font-size: 8em; kairėje: -8em; neskaidrumas: 1; } 100% {font-size: 10em; kairėje: -10em; neskaidrumas: 0; teksto šešėlis: .02em -.02em 4px #aaa, .04em -.04em 4px # 777, .06em -.06em 4px # 444, .08em -.08em 4px # 111; } * * *
Pastaba: kad ir kokį projektą vykdytumėte, būtina turėti debesies saugyklą, kuri galėtų susitvarkyti (padės mūsų vadovas).
Šis straipsnis iš pradžių buvo paskelbtas kūrybinio interneto dizaino žurnalo „Web Designer“ 273 numeryje. Įsigykite 273 numerį čia arba užsiprenumeruokite „Web Designer“ čia.
