Sisältö
- 01. Lisää koodi sivusi tekstitunnisteeseen
- 02. Näytön muotoilu
- 03. Näytetään häiriö
- 04. Pidä kaikkea
- 05. Häiriön suorittaminen
- 06. Takaisin normaaliin
- Hanki lippusi Generate New Yorkiin nyt
Erinomainen tapa kiinnittää huomiota - ja pitää siitä kiinni - on luoda verkkosivujen asettelu, joka esittelee kykyjäsi alusta alkaen (kunnollinen verkkosivustojen rakentaja voi auttaa rakentamisessa). Ukrainan verkkotoimiston Vintage-sivusto on loistava esimerkki tästä, joka houkuttelee sinut VR-suunnitteluportfolioonsa huomiota herättävällä yhdistelmällä sykkivää lasihiukkasista rakennettua logoa ja ihanaa hiukan, joka aktivoituu hiiren päällä.
- Verkkoanimaatio: Koodia ei vaadita
Yksinkertainen säästeliäästi käytetty häiriövaikutus voi antaa sivustollesi elintärkeän pienen visuaalisen mielenkiinnon, ja se on yllättävän helppo toteuttaa. Näin voit tehdä sen.
Onko sinulla mielessä monimutkainen verkkosivusto? Varmista, että verkkopalvelusi on tehtävän tasalla. Pidä suunnittelutiedostosi turvassa pilvitallennustilassa.
Lataa tiedostot tähän opetusohjelmaan.
01. Lisää koodi sivusi tekstitunnisteeseen
Yksinkertaisen häiriöefektin luominen voidaan tehdä niin monella eri tavalla. Tässä aiomme tehdä sen ottamalla animoitu GIF tekstin yläosassa, joka kytketään päälle ja pois päältä näytössä. Lisää ensin tämä koodi sivusi tekstitunnisteeseen.
div id = "holder" onmouseover = "glitch ()"> div id = "glitch"> / div> WEB br> TUOTE- br> ION / div>
02. Näytön muotoilu
Sisältö käyttää tiettyä Google Fonts -kirjasintyyppiä nimeltä Work Sans. Tartu linkki sieltä ja aseta se pääosaan; lisää sitten CSS joko tyylitageihin tai erilliseen CSS-tiedostoon. Sivu on tehty mustaksi valkoisella tekstillä ja haltija on tyyliltään tekstiä varten.
body {tausta: # 000; font-family: ”Work Sans”, sans-serif; väri: #fff; } #holder {font-size: 6em; leveys: 500px; korkeus: 300px; marginaali: 0 auto; asema: suhteellinen; }
03. Näytetään häiriö
Häiriöefekti tulee olemaan taustakuva, joka sijoitetaan suoraan tekstin yläosaan. Tärkeä osa on, että se tehdään näkymättömäksi vähentämällä peittävyys nollaan, jotta se ei näy ennen kuin käyttäjä on vuorovaikutuksessa tekstin kanssa.
#glitch {sijainti: absoluuttinen; yläosa: 0; vasen: 0; z-indeksi: 10; leveys: 100%; korkeus: 100%; tausta: url (glitch.gif); opasiteetti: 0; }
04. Pidä kaikkea
Lisää komentotunnisteet runko-osan loppuun ja luo välimuistissa oleva viittaus asiakirjan glitch-div: iin. Sitten muuttuja nimeltä ”over” asetetaan epätosi-arvoksi. Tämä kytketään päälle ja pois päältä, kun käyttäjä siirtyy tekstin päälle.
var gl = document.getElementById ("häiriö"); var over = väärä;
05. Häiriön suorittaminen
Häiriötoimintoa kutsutaan, kun hiiri siirtyy tekstin päälle. Jos häiriö ei ole käynnissä, häiriön näkyvyys otetaan käyttöön ja se sammutetaan puolitoista sekunnin kuluttua.Voit kokeilla tätä ja tehdä satunnaisluvusta sen arvaamattomuuden.
funktion häiriö () {if (over == false) {gl.style.opacity = "1"; setTimeout (function () {normaali ();}, 1500); }}
06. Takaisin normaaliin
Häiriöefektin ei pitäisi pysyä päällä, koska se olisi liian ärsyttävää käyttäjälle, mutta interaktiivisena elementtinä se toimii hyvin. Tässä koodi palauttaa peittävyyden takaisin nollaksi, jotta se ei näy tekstin yläosassa.
toimi normaalisti () {gl.style.opacity = "0"; }
Hanki lippusi Generate New Yorkiin nyt
Kolmen päivän web-suunnittelutapahtuma Generate New York on palannut. 25. – 27. Huhtikuuta 2018 pidettäviin pääpuhujiin kuuluvat SuperFriendlyn Dan Mall, verkkoanimaatiokonsultti Val Head, full-stack JavaScript -kehittäjä Wes Bos ja paljon muuta. Siellä on myös koko päivän työpajoja ja arvokkaita verkostoitumismahdollisuuksia - älä missaa sitä. Hanki Generate-lippusi nyt.
Tämä artikkeli julkaistiin alun perin luovan web-suunnittelun aikakauslehden Web Designer numerossa 270. Osta numero 270 täältä tai tilaa Web Designer täältä.
