Nilalaman
- 01. Magdagdag ng code sa body tag ng iyong pahina
- 02. Pag-istilo ng display
- 03. Pagpapakita ng glitch
- 04. Hawak ang lahat
- 05. Pagpapatakbo ng glitch
- 06. Bumalik sa normalidad
- Kunin ang iyong tiket para sa Bumuo ng New York ngayon
Ang isang mahusay na paraan upang makakuha ng pansin - at mapanatili ito - ay upang lumikha ng isang layout ng website na nagpapakita ng iyong mga talento mula sa off (isang disenteng tagabuo ng website ay makakatulong sa pagbuo). Ang site ng web site ng ahensya ng Ukraine ay isang mahusay na halimbawa nito, iginuhit ka sa portfolio ng disenyo ng VR na may isang nakagaganyak na kumbinasyon ng isang pumapasok na logo na itinayo mula sa mga partikulo ng salamin at isang kaibig-ibig na piraso ng glitch na nagpapagana sa hover.
- Animasyon sa web: Walang kinakailangang code
Ang isang simpleng epekto ng glitch na ginamit nang matipid ay maaaring magbigay sa iyong site ng isang mahalagang kaunting labis na visual na interes, at nakakagulat na madaling ipatupad. Narito kung paano ito gawin.
May naisip bang isang kumplikadong website? Siguraduhin na ang iyong web hosting ay nasa gawain. At panatilihing ligtas ang iyong mga file sa disenyo sa cloud storage.
I-download ang mga file para sa tutorial na ito
01. Magdagdag ng code sa body tag ng iyong pahina
Ang paglikha ng isang simpleng epekto ng glitch ay maaaring gawin sa maraming iba't ibang mga paraan. Gagawin namin ito sa pamamagitan ng pagkakaroon ng isang animated na GIF sa tuktok ng teksto, na bubukas at papatayin sa display. Una, idagdag ang code na ito sa body tag ng iyong pahina.
div id = "holder" onmouseover = "glitch ()"> div id = "glitch"> / div> WEB br> PRODUKTO- br> ION / div>
02. Pag-istilo ng display
Gumagamit ang nilalaman ng isang tukoy na typeface mula sa Google Font na tinatawag na Work Sans. Grab ang link mula doon at ilagay ito sa iyong seksyon ng ulo; pagkatapos ay idagdag ang CSS sa alinman sa mga style tag o isang hiwalay na CSS file. Ang pahina ay ginawang itim na may puting teksto at ang may-ari ay naka-istilo para sa teksto.
katawan {background: # 000; font-family: 'Work Sans', sans-serif; kulay: #fff; } #holder {font-size: 6em; lapad: 500px; taas: 300px; margin: 0 auto; posisyon: kamag-anak; }
03. Pagpapakita ng glitch
Ang glitch effect ay magiging isang imahe sa background na inilalagay nang direkta sa tuktok ng teksto. Ang mahalagang bahagi dito ay ginagawa itong hindi nakikita sa pamamagitan ng pagbawas sa opacity sa zero upang hindi ito magpakita hanggang sa makipag-ugnay ang gumagamit sa teksto.
#glitch {posisyon: ganap; itaas: 0; kaliwa: 0; z-index: 10; lapad: 100%; taas: 100%; background: url (glitch.gif); opacity: 0; }
04. Hawak ang lahat
Magdagdag ng mga tag ng script sa dulo ng seksyon ng katawan at lumikha ng isang naka-cache na sanggunian sa div na 'glitch' sa dokumento. Pagkatapos ang isang variable na pinangalanang 'over' ay nakatakda sa hindi totoo. Ito ay i-on at i-off kapag gumagalaw ang gumagamit sa teksto.
var gl = document.getElementById ("glitch"); var over = false;
05. Pagpapatakbo ng glitch
Ang pagpapaandar ng glitch ay tinatawag na kapag ang mouse ay gumagalaw sa teksto. Kung ang glitch ay hindi tumatakbo pagkatapos ang glitch visibility ay nakabukas at ito ay naka-off pagkatapos ng isa at kalahating segundo.Maaari kang mag-eksperimento dito at gumamit ng isang random na numero upang gawin itong mas mahulaan.
function glitch () {if (over == false) {gl.style.opacity = "1"; setTimeout (pagpapaandar () {normal ();}, 1500); }}
06. Bumalik sa normalidad
Ang epekto ng glitch ay hindi dapat manatili sa dahil ito ay magiging masyadong nakakainis sa gumagamit, ngunit bilang isang interactive na elemento ito ay gumagana nang maayos. Dito, nai-reset ng code ang opacity pabalik sa zero upang hindi ito makita sa tuktok ng teksto.
gumana nang normal () {gl.style.opacity = "0"; }
Kunin ang iyong tiket para sa Bumuo ng New York ngayon
Tatlong araw na kaganapan sa disenyo ng web ang Bumuo ng New York ay bumalik. Naganap sa pagitan ng 25-27 Abril 2018, ang mga nagsasalita ng headline ay kasama ang Super Mallfriend's Dan Mall, consultant ng animasyon sa web na Val Head, full-stack na developer ng JavaScript na si Wes Bos at marami pa. Mayroon ding isang buong araw ng mga pagawaan at mahalagang pagkakataon sa networking - huwag palampasin ito. Kunin ang iyong tiket na Bumuo ngayon.
Ang artikulong ito ay orihinal na na-publish sa isyu ng 270 ng malikhaing web design magazine na Web Designer. Bumili ng isyu 270 dito o mag-subscribe sa Web Designer dito.
