Efni.
- 01. Bættu kóða við meginmálið á síðunni þinni
- 02. Stíll skjáinn
- 03. Sýnir gallann
- 04. Haltu öllu
- 05. Að keyra gallann
- 06. Aftur í eðlilegt horf
- Fáðu þér miða á Generate New York núna
Frábær leið til að ná athygli - og halda utan um hana - er að búa til vefsíðuútlit sem sýnir hæfileika þína frá byrjun (ágætis vefsíðugerðarmaður getur hjálpað til við uppbygginguna). Vefsíða Úkraínu vefstofu Vintage er frábært dæmi um þetta og dregur þig inn í VR hönnunarsafn sitt með áberandi blöndu af púlsandi merki byggt úr glerögnum og yndislegu smá bili sem virkjar á sveima.
- Hreyfimyndir á vefnum: Enginn kóða krafist
Einföld bilunaráhrif sem notuð eru lítillega geta veitt vefsvæðinu mikilvæga aukalega sjónrænan áhuga og það er furðu auðvelt í framkvæmd. Svona á að gera það.
Ertu með flókna vefsíðu í huga? Gakktu úr skugga um að vefþjónusta þín standi undir verkefninu. Og haltu hönnunarskrám þínum öruggum í skýjageymslu.
Sæktu skrárnar fyrir þessa kennslu.
01. Bættu kóða við meginmálið á síðunni þinni
Að búa til einföld bilunaráhrif er hægt að gera á svo marga mismunandi vegu. Hér ætlum við að gera það með því að hafa líflegt GIF yfir textann, sem verður kveikt og slökkt á skjánum. Fyrst skaltu bæta þessum kóða við meginmálið á síðunni þinni.
div id = "holder" onmouseover = "glitch ()"> div id = "glitch"> / div> WEB br> PRODUCT- br> ION / div>
02. Stíll skjáinn
Innihaldið mun nota sérstaka leturgerð frá Google leturgerðum sem kallast Work Sans. Gríptu hlekkinn þaðan og settu hann í höfuðhlutann þinn; bættu síðan CSS við annaðhvort stílmerki eða sérstaka CSS skrá. Síðan er gerð svört með hvítum texta og handhafi er stilltur upp fyrir textann.
líkami {bakgrunnur: # 000; font-family: ‘Work Sans’, sans-serif; litur: #fff; } #haldari {leturstærð: 6em; breidd: 500 px; hæð: 300px; framlegð: 0 sjálfvirkt; staða: ættingi; }
03. Sýnir gallann
Bilunaráhrifin verða bakgrunnsmynd sem er sett beint ofan í textann. Mikilvægi hlutinn hér er að það er gert ósýnilegt með því að draga úr ógagnsæi í núll svo að það birtist ekki fyrr en notandinn hefur samskipti við textann.
# glitch {stöðu: alger; efst: 0; vinstri: 0; z-vísitala: 10; breidd: 100%; hæð: 100%; bakgrunnur: url (glitch.gif); ógagnsæi: 0; }
04. Haltu öllu
Bættu handritamerkjum við enda meginhlutans og búðu til skyndiminni tilvísun í „bilunina“ í skjalinu. Þá er breytan sem heitir 'yfir' stillt á rangar. Þetta verður kveikt og slökkt þegar notandinn færist yfir textann.
var gl = document.getElementById ("galli"); var yfir = ósatt;
05. Að keyra gallann
Gallaaðgerðin er kölluð þegar músin hreyfist yfir textann. Ef gallinn er ekki í gangi þá er kveikt á gallasýnileikanum og slökkt á honum eftir eina og hálfa sekúndu.Þú getur gert tilraunir með þetta og notað slembitölu til að gera það óútreiknanlegra.
virka galli () {ef (yfir == ósatt) {gl.style.opacity = "1"; setTimeout (virka () {venjulegt ();}, 1500); }}
06. Aftur í eðlilegt horf
Bilunaráhrifin ættu ekki að vera áfram þar sem það væri of pirrandi fyrir notandann, en sem gagnvirkur þáttur virkar það vel. Hér stillir númerið ógagnsæi aftur í núll svo að það sést ekki efst á textanum.
virka eðlilegt () {gl.style.opacity = "0"; }
Fáðu þér miða á Generate New York núna
Þriggja daga viðburður við vefsíðuhönnun Generate New York er kominn aftur. Fyrstu hátalararnir eiga sér stað á tímabilinu 25. - 27. apríl 2018, en þeir eru SuperFriendly's Dan Mall, ráðgjafi vefhugmynda, Val Head, JavaScript-verktaki Wes Bos og fleiri. Það er líka heill dagur af vinnustofum og dýrmætum netmöguleikum - ekki missa af því. Fáðu þér Generate miðann núna.
Þessi grein var upphaflega birt í útgáfu 270 af skapandi vefhönnunartímariti vefhönnuðar. Kauptu tölublað 270 hér eða gerast áskrifandi að vefhönnuð hér.
