Vsebina
- 01. Dodajte oznako na telo strani vaše strani
- 02. Oblikovanje zaslona
- 03. Prikaz napake
- 04. Drži vse
- 05. Zagon napake
- 06. Nazaj k normalnosti
- Pridobite si vstopnico za Generate New York zdaj
Odličen način, da pritegnete pozornost - in jo držite - je ustvariti postavitev spletnega mesta, ki od začetka prikazuje vaše talente (pri gradnji vam lahko pomaga spodoben graditelj spletnih strani). Spletna stran ukrajinske spletne agencije Vintage je odličen primer tega, ki vas s svojim privlačnim kombinacijo utripajočega logotipa, zgrajenega iz steklenih delcev, in čudovitega napak, ki se aktivira pri lebdenju, potegne v svoj portfelj VR-oblikovanja.
- Spletna animacija: koda ni potrebna
Preprost napačen učinek lahko vašemu spletnemu mestu prinese malo dodatnega vizualnega zanimanja in ga je presenetljivo enostavno izvesti. Tukaj je opisano, kako to storiti.
Imate v mislih zapleteno spletno mesto? Prepričajte se, da vaše spletno gostovanje ustreza tej nalogi. Pazite, da bodo vaše oblikovalske datoteke varne v shrambi v oblaku.
Prenesite datoteke za to vadnico.
01. Dodajte oznako na telo strani vaše strani
Ustvarjanje preprostega napačnega učinka lahko naredimo na toliko različnih načinov. Tukaj bomo to storili z animiranim GIF na vrhu besedila, ki se bo vklopil in izklopil na zaslonu. Najprej dodajte to kodo oznaki telesa vaše strani.
div id = "holder" onmouseover = "glitch ()"> div id = "glitch"> / div> WEB br> PRODUCT- br> ION / div>
02. Oblikovanje zaslona
Vsebina bo uporabila posebno pisavo iz Googlovih pisav, imenovano Work Sans. Pograbite povezavo od tam in jo postavite v glavo; nato dodajte CSS bodisi slog oznakam ali ločeni datoteki CSS. Stran je črna z belim besedilom, držalo pa je oblikovano za besedilo.
telo {ozadje: # 000; družina pisav: 'Work Sans', sans-serif; barva: #fff; } #holder {font-size: 6em; širina: 500px; višina: 300px; marža: 0 samodejno; položaj: sorodnik; }
03. Prikaz napake
Napaka bo slika ozadja, ki bo postavljena neposredno na vrh besedila. Pri tem je pomembno, da je neviden tako, da zmanjša motnost na nič, da se ne prikaže, dokler uporabnik ne komunicira z besedilom.
#glitch {položaj: absolutno; zgoraj: 0; levo: 0; z-indeks: 10; širina: 100%; višina: 100%; ozadje: url (glitch.gif); motnost: 0; }
04. Drži vse
Dodajte oznake skriptov na konec odseka telesa in ustvarite predpomnjeno sklic na div 'glitch' v dokumentu. Nato je spremenljivka z imenom 'over' nastavljena na false. To se vklopi in izklopi, ko se uporabnik premakne nad besedilo.
var gl = document.getElementById ("napaka"); var nad = napačno;
05. Zagon napake
Funkcija napake se pokliče, ko se miška premika po besedilu. Če napaka ne deluje, je vidnost napake vklopljena in izklopljena po eni sekundi in pol.S tem lahko eksperimentirate in uporabite naključno število, da postane bolj nepredvidljivo.
funkcija glitch () {if (over == false) {gl.style.opacity = "1"; setTimeout (function () {normal ();}, 1500); }}
06. Nazaj k normalnosti
Učinek napake ne bi smel ostati vklopljen, saj bi bil uporabniku preveč moteč, vendar kot interaktivni element deluje dobro. Tukaj koda ponastavi motnost nazaj na nič, tako da ni vidna na vrhu besedila.
funkcija normalna () {gl.style.opacity = "0"; }
Pridobite si vstopnico za Generate New York zdaj
Vrnil se je tridnevni dogodek spletnega oblikovanja Generate New York. Med 25. in 27. aprilom 2018 med glavnimi zvočniki so Dan Mall iz SuperFriendlyja, svetovalec za spletno animacijo Val Head, razvijalec JavaScript-a Wes Bos in drugi. Obstajajo tudi celodnevne delavnice in dragocene priložnosti za mreženje - ne zamudite. Pridobite svojo Generate vozovnico zdaj.
Ta članek je bil prvotno objavljen v številki 270 revije Web Designer za kreativno spletno oblikovanje. Kupite številko 270 tukaj ali naročite se na Web Designer tukaj.
