Sadržaj
- 01. Dodajte kôd na oznaku tijela vaše stranice
- 02. Stiliziranje zaslona
- 03. Prikaz kvara
- 04. Drži sve
- 05. Trčanje glitcha
- 06. Povratak u normalu
- Nabavite odmah kartu za Generate New York
Sjajan način da privučete pažnju - i zadržati je - je stvoriti izgled web stranice koji iznutra prikazuje vaše talente (pristojan graditelj web stranica može vam pomoći u izradi). Izvrsni je primjer web stranica ukrajinske web agencije Vintage, koja vas uvlači u svoj portfelj VR dizajna s privlačnom kombinacijom pulsirajućeg logotipa izgrađenog od staklenih čestica i ljupkog glitcha koji se aktivira kod lebdenja.
- Web animacija: nije potreban kôd
Jednostavan glitch efekt koji se koristi štedljivo može vašoj web lokaciji pružiti vitalni malo dodatnog vizualnog interesa, a iznenađujuće je jednostavan za implementaciju. Evo kako to učiniti.
Imate na umu složenu web stranicu? Provjerite odgovara li vaš web hosting zadatku. I zaštitite svoje dizajnerske datoteke na skladištu u oblaku.
Preuzmite datoteke za ovaj vodič.
01. Dodajte kôd na oznaku tijela vaše stranice
Stvaranje jednostavnog glitch efekta može se izvesti na toliko različitih načina. Ovdje ćemo to učiniti tako da na vrhu teksta imamo animirani GIF koji će se uključiti i isključiti na zaslonu. Prvo dodajte ovaj kôd na oznaku tijela vaše stranice.
div id = "holder" onmouseover = "glitch ()"> div id = "glitch"> / div> WEB br> PRODUCT- br> ION / div>
02. Stiliziranje zaslona
Sadržaj će koristiti posebnu vrstu Google fontova nazvanu Work Sans. Dohvatite vezu odatle i stavite je u odjeljak za glavu; zatim dodajte CSS ili u stilske oznake ili u zasebnu CSS datoteku. Stranica je crna s bijelim tekstom, a držač je oblikovan za tekst.
tijelo {pozadina: # 000; obitelj fontova: 'Work Sans', sans-serif; boja: #fff; } #holder {font-size: 6em; širina: 500px; visina: 300px; marža: 0 auto; položaj: relativan; }
03. Prikaz kvara
Glitch efekt bit će pozadinska slika koja se postavlja izravno na vrh teksta. Ovdje je važno da se učini nevidljivim smanjivanjem neprozirnosti na nulu kako se ne bi prikazao dok korisnik ne stupi u interakciju s tekstom.
#glitch {pozicija: apsolutno; vrh: 0; lijevo: 0; z-indeks: 10; širina: 100%; visina: 100%; pozadina: url (glitch.gif); neprozirnost: 0; }
04. Drži sve
Dodajte oznake skripte na kraj odjeljka tijela i stvorite predmemoriranu referencu na 'glitch' div u dokumentu. Tada je varijabla pod nazivom 'over' postavljena na false. To će se uključiti i isključiti kada se korisnik pomakne preko teksta.
var gl = document.getElementById ("greška"); var preko = lažno;
05. Trčanje glitcha
Funkcija glitch poziva se kada se miš pomiče preko teksta. Ako kvar nije pokrenut, vidljivost kvara je uključena i isključena je nakon jedne i pol sekunde.Možete eksperimentirati s tim i koristiti slučajni broj kako biste ga učinili nepredvidljivijim.
funkcija glitch () {if (over == false) {gl.style.opacity = "1"; setTimeout (function () {normal ();}, 1500); }}
06. Povratak u normalu
Glitch efekt ne bi smio ostati jer bi previše živcirao korisnika, ali kao interaktivni element dobro funkcionira. Ovdje kôd vraća neprozirnost na nulu, tako da nije vidljiv na vrhu teksta.
funkcija normalna () {gl.style.opacity = "0"; }
Nabavite odmah kartu za Generate New York
Vratio se trodnevni događaj web dizajna Generate New York. Od 25. do 27. travnja 2018., među glavnim govornicima su Dan Mall iz SuperFriendlyja, savjetnik za web animaciju Val Head, JavaScript programer Wes Bos i mnogi drugi. Tu su i cjelodnevne radionice i dragocjene mogućnosti umrežavanja - ne propustite. Nabavite svoju Generate kartu odmah.
Ovaj je članak izvorno objavljen u broju 270 kreativnog časopisa za web dizajn Web Designer. Kupite izdanje 270 ovdje ili ovdje se pretplatite na Web Designer.
