Sisu
- 01. Lisage kood oma lehe kehamärgendile
- 02. Displei stiil
- 03. Vea kuvamine
- 04. Hoidke kõike
- 05. Glitchi käitamine
- 06. Tagasi normaalsuse juurde
- Hankige kohe Generate New Yorki pilet
Suurepärane viis tähelepanu äratamiseks - ja sellest kinni hoidmiseks - on luua veebisaidi paigutus, mis tutvustab teie andeid juba eos (korralik veebisaidi koostaja võib selle koostamisel abiks olla). Ukraina veebiagentuuri Vintage sait on selle suurepärane näide, mis tõmbab teid oma VR-i disainiportfelli koos pilkupüüdva kombinatsiooniga pulseerivast klaasosakestest logost ja hõlpsalt aktiveeritavast mõningast tõrkest.
- Veebianimatsioon: koodi pole vaja
Säästlikult kasutatav lihtne tõrkeefekt võib teie saidile pakkuda visuaalset huvi ja seda on üllatavalt lihtne rakendada. Siit saate teada, kuidas seda teha.
Kas peate silmas keerukat veebisaiti? Veenduge, et teie veebimajutus oleks ülesannete kõrgusel. Ja hoidke oma disainifaile pilvemälus.
Laadige failid alla selle õpetuse jaoks.
01. Lisage kood oma lehe kehamärgendile
Lihtsa tõrke efekti saab luua nii mitmel erineval viisil. Siin teeme seda nii, et teksti ülaosas on animeeritud GIF, mis kuvaril sisse ja välja lülitatakse. Kõigepealt lisage see kood oma lehe kehamärgendile.
div id = "holder" onmouseover = "glitch ()"> div id = "glitch"> / div> WEB br> PRODUCT- br> ION / div>
02. Displei stiil
Sisu kasutab Google Fontsilt konkreetset kirjatüüpi nimega Work Sans. Haarake sealt link ja asetage see oma peaosasse; siis lisage CSS kas stiilimärgenditele või eraldi CSS-failile. Lehekülg on must ja valge tekst ning hoidik on teksti jaoks kujundatud.
keha {taust: # 000; font-family: ’Work Sans’, sans-serif; värv: #fff; } #holder {font-size: 6em; laius: 500px; kõrgus: 300px; veeris: 0 automaatne; positsioon: sugulane; }
03. Vea kuvamine
Glitch-efekt saab olema taustapilt, mis asetatakse otse teksti ülaosale. Oluline osa on siin see, et see muudetakse nähtamatuks, vähendades läbipaistmatust nullini, nii et seda ei kuvata enne, kui kasutaja on tekstiga suhelnud.
#glitch {positsioon: absoluutne; ülemine: 0; vasakul: 0; z-indeks: 10; laius: 100%; kõrgus: 100%; taust: url (glitch.gif); läbipaistmatus: 0; }
04. Hoidke kõike
Lisage tekstiosa lõppu skriptimärgendid ja looge vahemälus viide dokumendi jaotisele „glitch”. Seejärel seatakse muutuja nimega ’üle’ valeks. See lülitatakse sisse ja välja, kui kasutaja teksti üle liigub.
var gl = document.getElementById ("tõrge"); var üle = vale;
05. Glitchi käitamine
Glitch-funktsiooni nimetatakse siis, kui hiir liigub teksti kohal. Kui tõrge ei tööta, lülitatakse tõrke nähtavus sisse ja see lülitatakse välja pooleteise sekundi pärast.Sellega saate katsetada ja kasutada juhuslikku arvu, et muuta see ettearvamatumaks.
funktsiooni tõrge () {if (üle == vale) {gl.style.opacity = "1"; setTimeout (function () {normal ();}, 1500); }}
06. Tagasi normaalsuse juurde
Glitch-efekt ei tohiks püsida, kuna see oleks kasutajale liiga tüütu, kuid interaktiivse elemendina töötab see hästi. Siin lähtestab kood läbipaistmatuse tagasi nulli, nii et see pole teksti ülaosas nähtav.
funktsioon normaalne () {gl.style.opacity = "0"; }
Hankige kohe Generate New Yorki pilet
Kolm päeva kestnud veebidisaini sündmus Generate New York on tagasi. Ajavahemikus 25. – 27. Aprill 2018 toimuvate peakõnelejate hulka kuuluvad SuperFriendly Dan Mall, veebianimatsiooni konsultant Val Head, JavaScripti arendaja Wes Bos ja palju muud. Seal on ka terve päev töötubasid ja väärtuslikke võrgustamisvõimalusi - ärge jätke seda kasutamata. Hankige oma Generate pilet kohe.
See artikkel ilmus algselt loomingulise veebidisaini ajakirja Web Designer väljaandes 270. Osta väljaanne 270 siit või tellige veebidisainer siin.
