Saturs
- 01. Pievienojiet kodu savas lapas pamattekstam
- 02. Displeja veidošana
- 03. Kļūdas parādīšana
- 04. Turiet visu
- 05. Glitch izpildīšana
- 06. Atpakaļ pie normāluma
- Iegūstiet savu biļeti Generate New York tūlīt
Lielisks veids, kā piesaistīt uzmanību un to noturēt, ir izveidot vietnes izkārtojumu, kas demonstrē jūsu talantus no sākuma (pienācīgs vietņu veidotājs var palīdzēt veidot). Ukrainas tīmekļa aģentūras Vintage vietne ir lielisks piemērs tam, piesaistot jūs tās VR dizaina portfelim ar uzkrītošu pulsējoša logotipa, kas veidots no stikla daļiņām, un jauka mazliet glitcha kombināciju, kas aktivizējas uz vietas.
- Tīmekļa animācija: kods nav nepieciešams
Vienkāršs taupības efekts, kas tiek izmantots taupīgi, var radīt jūsu vietnei ļoti svarīgu vizuālo interesi, un to ir pārsteidzoši viegli īstenot. Lūk, kā to izdarīt.
Vai domājat par sarežģītu vietni? Pārliecinieties, ka jūsu tīmekļa mitināšana ir atbilstoša uzdevumam. Un saglabājiet savus dizaina failus drošībā mākoņa krātuvē.
Lejupielādējiet failus šai apmācībai.
01. Pievienojiet kodu savas lapas pamattekstam
Vienkāršu glitch efektu var izveidot tik dažādos veidos. Šeit mēs to darīsim, virs teksta augšdaļas izveidojot animētu GIF attēlu, kas tiks ieslēgts un izslēgts displejā. Vispirms pievienojiet šo kodu savas lapas pamattekstā.
div id = "holder" onmouseover = "glitch ()"> div id = "glitch"> / div> WEB br> PRODUCT- br> ION / div>
02. Displeja veidošana
Saturā tiks izmantots īpašs Google Fonts burtveidols ar nosaukumu Work Sans. Paņemiet saiti no turienes un ievietojiet to savā galvas sadaļā; pēc tam pievienojiet CSS vai nu stila tagiem, vai atsevišķam CSS failam. Lapa ir padarīta melna ar baltu tekstu, un turētājs ir veidots tekstam.
ķermenis {fons: # 000; font-family: ‘Work Sans’, sans-serif; krāsa: #fff; } # turētājs {font-size: 6em; platums: 500 pikseļi; augstums: 300 pikseļi; margin: 0 auto; amats: radinieks; }
03. Kļūdas parādīšana
Glitch efekts būs fona attēls, kas tiek novietots tieši virs teksta augšdaļas. Svarīga daļa ir tā, ka tas tiek padarīts neredzams, samazinot necaurredzamību līdz nullei, lai tā netiktu parādīta, kamēr lietotājs mijiedarbojas ar tekstu.
#glitch {pozīcija: absolūts; augšdaļa: 0; pa kreisi: 0; z-indekss: 10; platums: 100%; augstums: 100%; fons: url (glitch.gif); necaurredzamība: 0; }
04. Turiet visu
Pievienojiet skripta tagus pamatteksta sadaļas beigām un izveidojiet kešatmiņā saglabātu atsauci uz dokumenta div “glitch”. Tad mainīgais ar nosaukumu “over” tiek iestatīts uz false. Tas tiks ieslēgts un izslēgts, kad lietotājs pārvietosies pa tekstu.
var gl = document.getElementById ("glitch"); var over = nepatiesa;
05. Glitch izpildīšana
Glitch funkcija tiek izsaukta, kad pele pārvietojas virs teksta. Ja kļūme nedarbojas, tad kļūmes redzamība tiek ieslēgta un pēc pusotras sekundes tiek izslēgta.Jūs varat eksperimentēt ar to un izmantot nejaušu skaitli, lai padarītu to neparedzamāku.
function glitch () {if (over == false) {gl.style.opacity = "1"; setTimeout (funkcija () {normāla ();}, 1500); }}
06. Atpakaļ pie normāluma
Glitch efektam nevajadzētu palikt, jo tas būtu pārāk kaitinošs lietotājam, bet kā interaktīvs elements tas darbojas labi. Šeit kods atjauno necaurredzamību uz nulli, lai tas nebūtu redzams teksta augšdaļā.
funkcija normāla () {gl.style.opacity = "0"; }
Iegūstiet savu biļeti Generate New York tūlīt
Trīs dienu web dizaina pasākums Generate New York ir atgriezies. Laikā no 2018. gada 25. līdz 27. aprīlim galvenie runātāji ietver SuperFriendly Dan Mall, tīmekļa animācijas konsultantu Val Head, pilnas kaudzes JavaScript izstrādātāju Wes Bos un daudz ko citu. Ir arī visa diena semināru un vērtīgas sadarbības iespējas - nepalaidiet garām to. Iegūstiet savu ģenerēšanas biļeti tūlīt.
Šis raksts sākotnēji tika publicēts radošā tīmekļa dizaina žurnāla Web Designer 270. numurā. Pērciet 270. numuru šeit vai abonējiet Web Designer šeit.
