Përmbajtje
- 01. Filloni dokumentin HTML
- 02. Përmbajtje e dukshme HTML
- 03. Fillimi i CSS
- 04. Enë për animacion
- 05. Fillimi i animacionit
- 06. Gjallëroni në pamje
- 07. Finalizimi i animacionit
Dashuria e humbur nga Jam3 e Kanadasë është një poezi interaktive bukur e errët, e gatshme për lëvizje, me zemër të vërtetë për ndjenjat e qëndrueshme rreth dashurisë së humbur. Paraqitja e faqes në internet është ndërtuar duke përdorur HTML5 me bibliotekën GSAP që mundëson animacionin e saj, një nga karakteristikat e saj më të habitshme nga ana vizuale është teksti i saj i animuar 3D që sjell me të vërtetë poezinë e Love Lost.
- Bëni efekte interaktive të tipografisë 3D
Duket mbresëlënëse si ferr, dhe nuk është e vështirë të përfshihesh në punën tënde për të krijuar një përvojë përdoruese tërheqëse; ja si është bërë.
Dëshironi të krijoni faqen tuaj tërheqëse? Provoni një mjet për krijimin e faqes në internet dhe mbajini gjërat duke ecur normalisht duke zgjedhur shërbimin e duhur të mbajtjes në internet.
01. Filloni dokumentin HTML
Hapi i parë është përcaktimi i strukturës së dokumentit HTML. Kjo përfshin enën HTML që fillon dokumentin, e cila përmban seksionet e kokës dhe trupit. Ndërsa seksioni i kokës përdoret kryesisht për të ngarkuar skedarin e jashtëm CSS, seksioni i trupit do të ruajë përmbajtjen e faqes së dukshme të krijuar në hapin 2.
! DOCTYPE html> html> kokë> titull> Lëvizja / Titulli 3D i Tekstit> lidhja rel = "stilet" lloji = "teksti / css" href = "styles.css" /> / kreu> trupi> * * * HAPI 2 K HTU / trupi> / html>
02. Përmbajtje e dukshme HTML
Përmbajtja e dukshme HTML përbëhet nga një enë artikulli që përmban tekstin e dukshëm. Pjesa e rëndësishme e kontejnerit të artikullit është atributi 'data-animate', i cili do të referohet nga CSS për të aplikuar efektet vizuale. Teksti brenda artikullit është bërë nga një etiketë h1 për të treguar që përmbajtja është titulli kryesor i faqes.
artikull data-animate = "move in"> h1> Përshëndetje Atje! / h1> / artikull>
03. Fillimi i CSS
Krijoni një skedar të ri të quajtur 'styles.css'. Grupi i parë i udhëzimeve vendosi kontejnerin dhe trupin HTML të faqes të ketë një sfond të zi, si dhe të mos ketë hapësirë të dukshme kufijsh. E bardha është vendosur gjithashtu si ngjyra e paracaktuar e tekstit për të gjithë elementët fëmijë në faqe për t'u trashëguar; shmangia e ngjyrës së zezë të paracaktuar të tekstit, duke e bërë përmbajtjen të duket e padukshme.
html, trupi {sfondi: # 000; mbushje: 0; diferencë: 0; ngjyra: #fff; }
04. Enë për animacion
Kontenieri i përmbajtjes referuar me atributin 'data-animate' ka stile specifike të aplikuara. Madhësia e tij është vendosur që të përputhet me madhësinë e plotë të ekranit duke përdorur njësitë e matjes vw dhe vh, si dhe duke u rrotulluar pak. Zbatohet një animacion i quajtur 'moveIn', i cili do të zgjasë për një kohëzgjatje prej 20 sekondash dhe do të përsëritet pafundësisht.
[data-animate = "lëviz brenda"] {pozicioni: relativ; gjerësia: 100vw; lartësia: 100vh; perde: 1; animacion: lëvizNë të 20-at pafund; rreshtimi i tekstit: qendra; shndërroj: rrotulloj (20deg); }
05. Fillimi i animacionit
Animacioni 'moveIn' referuar në hapin e mëparshëm kërkon një përkufizim duke përdorur @keyframes. Korniza e parë që fillon me 0% të animacionit përcakton madhësinë e paracaktuar të shkronjave, pozicionimin e tekstit dhe hijen e dukshme. Për më tepër, artikulli është vendosur me errësirë zero në mënyrë që fillimisht të jetë i padukshëm - dmth. shfaqet jashtë pamjes.
@keyframes moveIn {0% {font-size: 1em; majtas: 0; perde: 0; hije teksti: asnjë; } * * * HAPI 6 KETU}
06. Gjallëroni në pamje
Kuadri tjetër vendoset në 10% përmes animacionit. Kjo kornizë vendos errësirën në plotësisht të dukshme, duke rezultuar që teksti gradualisht të animohet në shikim.Për më tepër, hije të shumta shtohen me vlera blu dhe ngjyrash në rënie për t'i dhënë tekstit iluzione të thellësisë 3D.
10% {perde: 1; hije teksti: .2em -.2em 4px #aaa, .4em -.4em 4px # 777, .6em -.6em 4px # 444, .8em -.8em 4px # 111; } * * * HAPI 7 KETU
07. Finalizimi i animacionit
Kornizat përfundimtare ndodhin në 80% dhe në fund të animacionit. Këto janë përgjegjëse për rritjen e madhësisë së shkronjave dhe lëvizjen e elementit në të majtë. Cilësime të reja janë aplikuar gjithashtu për hijen e tekstit për të gjallëruar, ndërsa zbehet gjithashtu teksti nga pamja nga kornizat 80% në 100%.
80% {madhësia e shkronjave: 8em; majtas: -8em; perde: 1; } 100% {font-size: 10em; majtas: -10em; perde: 0; hije teksti: .02em -.02em 4px #aaa, .04em -.04em 4px # 777, .06em -.06em 4px # 444, .08em -.08em 4px # 111; } * * *
Shënim: çfarëdo projekti në të cilin po filloni, ruajtja e resë që mund të përballojë është thelbësore (udhëzuesi ynë do t'ju ndihmojë).
Ky artikull u botua fillimisht në numrin 273 të revistës krijuese të krijimit të faqeve Web Designer. Blini numrin 273 këtu ose pajtohuni tek Web Designer këtu.
