Përmbajtje
- 01. Shtoni kod në etiketën trupore të faqes tuaj
- 02. Stilizimi i ekranit
- 03. Shfaqja e defektit
- 04. Mbaj gjithçka
- 05. Drejtimi i defektit
- 06. Kthehu tek normaliteti
- Merrni tani biletën tuaj për Generate New York
Një mënyrë e shkëlqyeshme për të tërhequr vëmendjen - dhe për ta mbajtur atë - është të krijoni një plan urbanistik të faqes në internet që tregon talentet tuaja nga larg (një ndërtues i mirë i faqeve të internetit mund të ndihmojë në ndërtimin). Agjencia e Ukrainës në internet Vintage's site është një shembull i shkëlqyeshëm i kësaj, duke ju tërhequr në portofolin e saj të dizajnit VR me një kombinim tërheqës të një logo pulsuese të ndërtuar nga grimcat e qelqit dhe një grimë bukuroshe që aktivizohet.
- Animacion në internet: Nuk kërkohet kod
Një efekt i thjeshtë anashkalimi i përdorur me masë mund t'i japë faqes tuaj një interes shumë vizual jetik, dhe është çuditërisht e lehtë për t'u zbatuar. Ja se si ta bëni.
Keni në mendje një faqe interneti komplekse? Sigurohuni që pritja juaj në internet të jetë në përputhje me detyrën. Dhe mbani skedarët tuaj të dizajnit të sigurt në ruajtjen e reve.
Shkarkoni skedarët për këtë udhëzim.
01. Shtoni kod në etiketën trupore të faqes tuaj
Krijimi i një efekti të thjeshtë anash mund të bëhet në shumë mënyra të ndryshme. Këtu do ta bëjmë duke pasur një GIF të animuar mbi krye të tekstit, i cili do të ndizet dhe fiket në ekran. Së pari, shtoni këtë kod në etiketën e trupit të faqes tuaj.
div id = "mbajtës" onmouseover = "glitch ()"> div id = "glitch"> / div> WEB br> PRODUCT- br> ION / div>
02. Stilizimi i ekranit
Përmbajtja do të përdorë një tip specifik nga Google Fonts të quajtur Work Sans. Kapni lidhjen nga atje dhe vendoseni në pjesën tuaj të kokës; pastaj shtoni CSS ose në etiketat e stilit ose në një skedar të veçantë CSS. Faqja është bërë e zezë me tekst të bardhë dhe mbajtësi është modeluar për tekstin.
trupi {sfondi: # 000; font-family: 'Work Sans', sans-serif; ngjyra: #fff; } #holder {font-size: 6em; gjerësia: 500px; lartësia: 300px; diferencë: 0 auto; pozicioni: relativ; }
03. Shfaqja e defektit
Efekti anomali do të jetë një imazh sfond që vendoset drejtpërdrejt në krye të tekstit. Pjesa e rëndësishme këtu është që ajo të bëhet e padukshme duke zvogëluar errësirën në zero në mënyrë që të mos shfaqet derisa përdoruesi të ndërveprojë me tekstin.
#glitch {pozicioni: absolut; maja: 0; majtas: 0; indeksi z: 10; gjerësia: 100%; lartësia: 100%; sfondi: url (glitch.gif); perde: 0; }
04. Mbaj gjithçka
Shtoni etiketa skenari në fund të seksionit të trupit dhe krijoni një referencë të memorizuar në divin 'glitch' në dokument. Pastaj një variabël me emrin 'over' është vendosur e gabuar. Kjo do të ndizet dhe fiket kur përdoruesi lëviz mbi tekst.
var gl = dokument.getElementById ("anomali"); var mbi = false;
05. Drejtimi i defektit
Funksioni glitch quhet kur miu lëviz mbi tekst. Nëse anomali nuk po funksionon, atëherë shikimi i defektit është ndezur dhe çaktivizohet pas një sekondash e gjysmë.Ju mund të eksperimentoni me këtë dhe të përdorni një numër të rastësishëm për ta bërë atë më të paparashikueshëm.
funksioni glitch () {if (over == false) {gl.style.opacity = "1"; setTimeout (funksioni () {normal ();}, 1500); }}
06. Kthehu tek normaliteti
Efekti glitch nuk duhet të qëndrojë i ndezur pasi do të ishte shumë i bezdisshëm për përdoruesin, por si një element interaktiv funksionon mirë. Këtu, kodi rivendos errësirën përsëri në zero në mënyrë që të mos jetë e dukshme në krye të tekstit.
funksioni normal () {gl.style.opacity = "0"; }
Merrni tani biletën tuaj për Generate New York
Ngjarja tre-ditore për krijimin e faqes në internet Generate New York është kthyer. Duke ndodhur midis 25-27 Prill 2018, folësit e titullit përfshijnë SuperFriendly's Dan Mall, konsulentin e animacioneve në internet Val Head, zhvilluesin e plotë të JavaScript Wes Bos dhe më shumë. Ekziston edhe një ditë e plotë punëtorish dhe mundësi të vlefshme për rrjetëzimin - mos e humbni. Merrni tani biletën tuaj Generate.
Ky artikull u botua fillimisht në numrin 270 të revistës krijuese të krijimit të faqeve Web Designer. Blini numrin 270 këtu ose pajtohuni tek Web Designer këtu.
