Conţinut
- 01. Adăugați cod la eticheta de corp a paginii dvs.
- 02. Stilizarea afișajului
- 03. Afișarea erorii
- 04. Ține totul
- 05. Rularea problemei
- 06. Înapoi la normalitate
- Obțineți biletul pentru Generate New York acum
O modalitate excelentă de a atrage atenția - și de a-l ține - este să creați un aspect de site web care să vă prezinte talentele de pe off (un constructor decent de site-uri web vă poate ajuta cu construirea). Site-ul agenției web din Ucraina Vintage este un exemplu excelent în acest sens, care vă atrage în portofoliul său de design VR cu o combinație atrăgătoare dintr-un logo pulsatoriu construit din particule de sticlă și o bucată minunată de glitch care se activează în timpul zborului.
- Animație web: nu este necesar cod
Un simplu efect de eroare folosit cu ușurință poate oferi site-ului dvs. un pic de interes vital suplimentar vizual și este surprinzător de ușor de implementat. Iată cum să o faceți.
Ai în vedere un site web complex? Asigurați-vă că găzduirea dvs. web este la înălțimea sarcinii. Și păstrați fișierele de proiectare în siguranță în spațiul de stocare în cloud.
Descărcați fișierele pentru acest tutorial.
01. Adăugați cod la eticheta de corp a paginii dvs.
Crearea unui simplu efect glitch se poate face în atât de multe moduri diferite. Aici o vom face având un GIF animat deasupra textului, care va fi activat și dezactivat pe ecran. Mai întâi, adăugați acest cod la eticheta de corp a paginii dvs.
div id = "titular" onmouseover = "glitch ()"> div id = "glitch"> / div> WEB br> PRODUCT- br> ION / div>
02. Stilizarea afișajului
Conținutul va utiliza un tip de text specific din Google Fonts numit Work Sans. Luați linkul de acolo și plasați-l în secțiunea capului; apoi adăugați CSS fie la etichetele de stil, fie la un fișier CSS separat. Pagina este făcută neagră cu text alb, iar suportul este decorat pentru text.
corp {fundal: # 000; font-family: „Work Sans”, sans-serif; culoare: #fff; } #holder {font-size: 6em; lățime: 500 px; înălțime: 300px; marja: 0 auto; poziție: relativă; }
03. Afișarea erorii
Efectul glitch va fi o imagine de fundal plasată direct deasupra textului. Partea importantă aici este că este făcută invizibilă prin reducerea opacității la zero, astfel încât să nu apară până când utilizatorul nu interacționează cu textul.
# glitch {poziția: absolută; sus: 0; stânga: 0; indice z: 10; lățime: 100%; înălțime: 100%; fundal: url (glitch.gif); opacitate: 0; }
04. Ține totul
Adăugați etichete script la sfârșitul secțiunii corp și creați o referință cache la divul „glitch” din document. Apoi, o variabilă numită „peste” este setată la fals. Aceasta va fi activată și dezactivată atunci când utilizatorul trece peste text.
var gl = document.getElementById ("glitch"); var peste = false;
05. Rularea problemei
Funcția glitch este apelată atunci când mouse-ul se deplasează peste text. Dacă eroarea nu funcționează, atunci vizibilitatea erorilor este activată și este oprită după o secundă și jumătate.Puteți experimenta acest lucru și puteți utiliza un număr aleatoriu pentru a-l face mai imprevizibil.
function glitch () {if (over == false) {gl.style.opacity = "1"; setTimeout (function () {normal ();}, 1500); }}
06. Înapoi la normalitate
Efectul glitch nu ar trebui să rămână activ, deoarece ar fi prea enervant pentru utilizator, dar ca element interactiv funcționează bine. Aici, codul resetează opacitatea la zero, astfel încât să nu fie vizibilă deasupra textului.
function normal () {gl.style.opacity = "0"; }
Obțineți biletul pentru Generate New York acum
Eveniment de design web de trei zile Generate New York a revenit. Având loc în perioada 25-27 aprilie 2018, printre vorbitorii principali se numără Dan Mall al SuperFriendly, consultant în animație web Val Head, dezvoltatorul JavaScript full-stack Wes Bos și multe altele. Există, de asemenea, o zi întreagă de ateliere și oportunități valoroase de rețea - nu ratați. Obțineți biletul Generați acum.
Acest articol a fost publicat inițial în numărul 270 al revistei web design creative Web Designer. Cumpărați numărul 270 aici sau abonați-vă la Web Designer aici.
