Saturs
- 01. Iniciējiet HTML dokumentu
- 02. Redzams HTML saturs
- 03. CSS uzsākšana
- 04. Animācijas konteiners
- 05. Animācijas uzsākšana
- 06. Animēt skatījumā
- 07. Animācijas pabeigšana
Kanādas Jam3 Love Lost ir skaisti tumšs, mobilajām ierīcēm gatavs interaktīvs dzejolis ar patiesu sirdi par ilgstošajām jūtām ap zaudēto mīlestību. Vietnes izkārtojums tika veidots, izmantojot HTML5, izmantojot GSAP bibliotēku, kas darbina tās animāciju, viena no vizuāli visspilgtākajām funkcijām ir animēts 3D teksts, kas patiešām atdzīvina Love Lost dzeju.
- Veikt interaktīvus 3D tipogrāfijas efektus
Tas izskatās iespaidīgi kā ellē, un to nav grūti iekļaut savā darbā, lai radītu saistošu lietotāja pieredzi; lūk, kā tas tiek darīts.
Vai vēlaties izveidot savu saistošo vietni? Izmēģiniet vietņu veidotāja rīku un nodrošiniet, lai lietas darbotos nevainojami, izvēloties pareizo tīmekļa mitināšanas pakalpojumu.
01. Iniciējiet HTML dokumentu
Pirmais solis ir definēt HTML dokumenta struktūru. Tas ietver HTML konteineru, kas iniciē dokumentu, kurā ir galvas un ķermeņa daļas. Kaut arī virsrakstu galvenokārt izmanto ārējā CSS faila ielādēšanai, pamatteksta sadaļā tiks saglabāts redzamais lapas saturs, kas izveidots 2. darbībā.
! DOCTYPE html> html> head> title> 3D teksta kustība / nosaukums> link rel = "stylesheet" type = "text / css" href = "styles.css" /> / head> body> * * * STEP 2 ŠEIT / body> / html>
02. Redzams HTML saturs
Redzamais HTML saturs sastāv no rakstu konteinera, kurā ir redzamais teksts. Rakstu konteinera svarīgā daļa ir atribūts ’data-animate’, uz kuru CSS atsauksies, lai izmantotu vizuālos efektus. Raksta iekšējais teksts ir izgatavots no h1 taga, kas norāda, ka saturs ir lapas galvenais nosaukums.
article data-animate = "move in"> h1> Sveiki! / h1> / article>
03. CSS uzsākšana
Izveidojiet jaunu failu ar nosaukumu ’styles.css’. Pirmajā instrukciju komplektā lapas HTML konteineram un pamattekstam ir melns fons, kā arī nav redzamas atstarpes starp malām. Balta ir iestatīta arī kā noklusējuma teksta krāsa visiem bērna mantotajiem elementiem lapā; izvairoties no noklusējuma teksta melnās krāsas, padarot saturu neredzamu.
html, body {background: # 000; polsterējums: 0; starpība: 0; krāsa: #fff; }
04. Animācijas konteiners
Satura konteinerā, uz kuru norādīts atribūts ’data-animate’, tiek izmantoti īpaši stili. Tās lielums ir iestatīts tā, lai tas atbilstu pilnam ekrāna izmēram, izmantojot vw un vh mērvienības, kā arī nedaudz pagriežot. Tiek izmantota animācija ar nosaukumu 'moveIn', kas ilgs 20 sekundes un atkārtosies bezgalīgi.
[data-animēt = "pārvietoties"] {pozīcija: relatīvs; platums: 100vw; augstums: 100vh; necaurredzamība: 1; animācija: moveIn 20s bezgalīgs; text-align: center; pārveidot: pagriezt (20deg); }
05. Animācijas uzsākšana
Iepriekšējā darbībā norādītajai “moveIn” animācijai ir nepieciešama definīcija, izmantojot @keyframes. Pirmais kadrs, kas sākas ar 0% animācijas, nosaka noklusējuma fonta lielumu, teksta pozicionēšanu un redzamo ēnu. Turklāt vienums ir iestatīts ar nulles necaurredzamību, lai tas sākotnēji būtu neredzams - ti. parādīts ārpus skata.
@keyframes moveIn {0% {font-size: 1em; pa kreisi: 0; necaurredzamība: 0; teksta ēna: nav; } * * * 6. SOLIS ŠEIT}
06. Animēt skatījumā
Nākamais kadrs tiek ievietots 10% apmērā, izmantojot animāciju. Šis rāmis nosaka necaurspīdīgumu pilnībā redzamam, kā rezultātā teksts pakāpeniski tiek animēts skatā.Turklāt tekstam tiek piešķirtas vairākas 3D ēnas ilūzijas ar zilām un samazinošām krāsu vērtībām.
10% {necaurredzamība: 1; teksta ēna: .2em -.2em 4px #aaa, .4em -.4em 4px # 777, .6em -.6em 4px # 444, .8em -.8em 4px # 111; } * * * 7. SOLIS ŠEIT
07. Animācijas pabeigšana
Pēdējie kadri notiek ar 80% un animācijas pašās beigās. Tie ir atbildīgi par fonta lieluma palielināšanu un elementa pārvietošanu pa kreisi. Jauni iestatījumi tiek lietoti arī teksta ēnai, lai to animētu, vienlaikus arī tekstu no logiem no 80% līdz 100% izbalinot.
80% {font-size: 8em; pa kreisi: -8em; necaurredzamība: 1; } 100% {font-size: 10em; pa kreisi: -10em; necaurredzamība: 0; teksta ēna: .02em -.02em 4px #aaa, .04em -.04em 4px # 777, .06em -.06em 4px # 444, .08em -.08em 4px # 111; } * * *
Piezīme. Jebkuram projektam, kuru jūs sākat, ir būtiska mākoņa krātuve, kas tiks galā (palīdzēs mūsu ceļvedis).
Šis raksts sākotnēji tika publicēts radošā tīmekļa dizaina žurnāla Web Designer 273. numurā. Pērciet 273. numuru šeit vai abonējiet Web Designer šeit.
