Efni.
- 01. Hafðu HTML skjalið af stað
- 02. Sýnilegt HTML efni
- 03. CSS upphaf
- 04. Teiknigám
- 05. Upphaf hreyfimynda
- 06. Hreyfðu til sýnis
- 07. Lokafrágangur
Love Lost eftir Jam3 frá Kanada er fallega dökkt, gagnvirkt ljóð sem er tilbúið fyrir farsíma og hefur raunverulegt hjarta um varanlegar tilfinningar í kringum glataða ást. Vefsíðuútlitið var byggt með HTML5 með GSAP bókasafninu sem knýr hreyfimyndir sínar, einn af sjónrænu einkennandi eiginleikunum er líflegur þrívíddartexti sem virkar raunverulega líf ljóðlistar Lost Lost.
- Gerðu gagnvirk þrívíddar leturfræðiáhrif
Það lítur út fyrir að vera áhrifamikið sem helvíti og það er ekki erfitt að fella það inn í eigin verk til að skapa áhugaverða notendareynslu; hér er hvernig það er gert.
Viltu búa til þína eigin spennandi síðu? Prófaðu tól til að byggja upp vefsíður og haltu hlutunum gangandi með því að velja réttu vefþjónustuna.
01. Hafðu HTML skjalið af stað
Fyrsta skrefið er að skilgreina uppbyggingu HTML skjalsins. Þetta nær til HTML ílátsins sem ræsir skjalið, sem inniheldur höfuð- og meginhluta. Þó að höfuðhlutinn sé aðallega notaður til að hlaða ytri CSS skrána, mun meginhlutinn geyma sýnilegt síðuefni sem búið var til í skrefi 2.
! DOCTYPE html> html> head> title> 3D Text Movement / title> link rel = "stylesheet" type = "text / css" href = "styles.css" /> / head> body> * * * STEP 2 HÉR / body> / html>
02. Sýnilegt HTML efni
Sýnilegt HTML-innihald samanstendur af greinarílát sem inniheldur sýnilegan texta. Mikilvægi hluti greinarinnar er „data-animate“ eiginleiki, sem CSS vísar til til að beita sjónrænum áhrifum. Textinn í greininni er gerður úr h1 merki til að gefa til kynna að innihaldið sé aðalheiti síðunnar.
grein data-animate = "færa þig inn"> h1> Halló þar! / h1> / grein>
03. CSS upphaf
Búðu til nýja skrá sem kallast ’styles.css’. Fyrsta röð leiðbeininganna stillir HTML ílát síðunnar og meginmálið þannig að það sé svartur bakgrunnur, og ekki sjáanlegt bil á milli ramma. Hvítur er einnig stilltur sem sjálfgefinn textalitur fyrir alla barnaþætti á síðunni til að erfa; forðast sjálfgefinn svartan lit texta sem gerir efni virðist vera ósýnilegt.
html, meginmál {bakgrunnur: # 000; bólstrun: 0; framlegð: 0; litur: #fff; }
04. Teiknigám
Efnisgámið sem vísað er til með „data-animate“ eiginleikanum hefur sérstaka stíla beitt. Stærð hans er stillt þannig að hún passi við fulla stærð skjásins með því að nota vw og vh mælieiningar, auk þess að vera aðeins snúið. Hreyfimynd sem kallast „moveIn“ er notuð og mun endast í 20 sekúndur og endurtaka sig óendanlega.
[data-animate = "flytja inn"] {position: relative; breidd: 100vw; hæð: 100vh; ógagnsæi: 1; fjör: moveIn 20s óendanleg; text-align: miðja; umbreyta: snúa (20deg); }
05. Upphaf hreyfimynda
„MoveIn“ hreyfimyndin sem vísað er til í fyrra skrefi krefst skilgreiningar með því að nota @keyframes. Fyrsti ramminn sem byrjar á 0% af hreyfimyndinni stillir sjálfgefna leturstærð, staðsetningu texta og sýnilegan skugga. Að auki er hluturinn stilltur með núlli ógagnsæi þannig að það er upphaflega ósýnilegt - þ.e. sýndur utan sjónar.
@keyframes moveIn {0% {font-size: 1em; vinstri: 0; ógagnsæi: 0; textaskuggi: enginn; } * * * SKREF 6 HÉR}
06. Hreyfðu til sýnis
Næsta rammi er settur í 10% í gegnum hreyfimyndina. Þessi rammi stillir ógagnsæið þannig að það sé fullkomlega sýnilegt og leiðir til þess að textinn verður smám saman hreyfður til sýnis.Að auki er mörgum skuggum bætt við með bláum og minnkandi litagildum til að veita blekkingum 3D dýptar í textann.
10% {ógagnsæi: 1; textaskuggi: .2em -.2em 4px #aaa, .4em -.4em 4px # 777, .6em -.6em 4px # 444, .8em -.8em 4px # 111; } * * * SKREF 7 HÉR
07. Lokafrágangur
Lokarammarnir eiga sér stað í 80% og alveg í lok fjörsins. Þessir eru ábyrgir fyrir því að auka leturstærð og færa þáttinn til vinstri. Nýjum stillingum er einnig beitt fyrir textaskuggann til að hreyfa sig á meðan þeir dofna einnig textann úr sjónum frá ramma 80% til 100%.
80% {leturstærð: 8em; vinstri: -8em; ógagnsæi: 1; } 100% {leturstærð: 10em; vinstri: -10em; ógagnsæi: 0; textaskuggi: .02em -.02em 4px #aaa, .04em -.04em 4px # 777, .06em -.06em 4px # 444, .08em -.08em 4px # 111; } * * *
Athugið: Hvaða verkefni sem þú ert að fara í, að hafa skýjageymslu sem þolir er nauðsynlegt (leiðarvísir okkar mun hjálpa).
Þessi grein var upphaflega birt í hefti 273 af skapandi vefhönnunartímariti vefhönnuðar. Kauptu tölublað 273 hér eða gerast áskrifandi að vefhönnuð hér.
