Ábhar
- 01. Cuir cód le clib choirp do leathanaigh
- 02. Styling an taispeáint
- 03. Ag taispeáint an glitch
- 04. Coinnigh gach rud
- 05. Ag rith an glitch
- 06. Ar ais go normáltacht
- Faigh do thicéad do Generate New York anois
Bealach iontach le haird a tharraingt - agus greim a choinneáil air - is ea leagan amach suíomh Gréasáin a chruthú a thaispeánann do chuid buanna ón taobh amuigh (is féidir le tógálaí láithreán gréasáin réasúnta cabhrú leis an tógáil). Is sampla iontach de seo gníomhaireacht gréasáin na hÚcráine Vintage’s, agus tú ag tarraingt isteach ina punann dearaidh VR le teaglaim mhealltach de lógó bíogach tógtha as cáithníní gloine agus giota álainn glitch a ghníomhaíonn ar hover.
- Beochan gréasáin: Níl aon chód ag teastáil
Féadann éifeacht glitch shimplí a úsáidtear go spárálach beagán spéise breise amhairc a thabhairt do do shuíomh, agus is ionadh go bhfuil sé furasta a chur i bhfeidhm. Seo conas é a dhéanamh.
An bhfuil suíomh Gréasáin casta agat i gcuimhne? Déan cinnte go bhfuil d’óstáil gréasáin suas leis an tasc. Agus coinnigh do chuid comhad dearaidh sábháilte i stóráil scamall.
Íoslódáil na comhaid don rang teagaisc seo.
01. Cuir cód le clib choirp do leathanaigh
Is féidir éifeacht glitch shimplí a chruthú ar an oiread sin bealaí éagsúla. Anseo táimid chun é a dhéanamh trí GIF beoite a bheith againn thar barr an téacs, a chasfar air agus as sa taispeáint. Ar dtús, cuir an cód seo le clib choirp do leathanaigh.
div id = "sealbhóir" onmouseover = "glitch ()"> div id = "glitch"> / div> WEB br> PRODUCT- br> ION / div>
02. Styling an taispeáint
Úsáidfidh an t-ábhar cló sonrach ó Google Clónna ar a dtugtar Work Sans. Faigh greim ar an nasc as sin agus cuir é i do roinn ceann; ansin cuir CSS le clibeanna stíle nó le comhad CSS ar leithligh. Tá an leathanach déanta dubh le téacs bán agus tá an sealbhóir stíle don téacs.
comhlacht {cúlra: # 000; cló-theaghlaigh: ‘Work Sans’, sans-serif; dath: #fff; } #holder {font-size: 6em; leithead: 500px; airde: 300px; corrlach: 0 uathoibríoch; seasamh: gaol; }
03. Ag taispeáint an glitch
Is í an éifeacht glitch a bheidh mar íomhá cúlra a chuirtear díreach os cionn bharr an téacs. Is í an chuid thábhachtach anseo ná go ndéantar é a bheith dofheicthe tríd an teimhneacht a laghdú go nialas ionas nach dtaispeánfar é go dtí go n-idirghníomhaíonn an t-úsáideoir leis an téacs.
#glitch {position: absalóideach; barr: 0; ar chlé: 0; z-innéacs: 10; leithead: 100%; airde: 100%; cúlra: url (glitch.gif); teimhneacht: 0; }
04. Coinnigh gach rud
Cuir clibeanna scripte ag deireadh an ailt choirp agus cruthaigh tagairt taiscthe don div ‘glitch’ sa doiciméad. Ansin leagtar athróg atá ainmnithe ‘os cionn’ go bréagach. Tionólfar é seo agus as nuair a bhogfaidh an t-úsáideoir an téacs.
var gl = document.getElementById ("glitch"); var over = bréagach;
05. Ag rith an glitch
Tugtar an fheidhm glitch nuair a ghluaiseann an luch thar an téacs. Mura bhfuil an glitch ag rith ansin déantar infheictheacht an glitch a chasadh air agus déantar í a mhúchadh tar éis soicind go leith.Is féidir leat triail a bhaint as seo agus uimhir randamach a úsáid chun í a dhéanamh níos intuartha.
glitch feidhm () {más rud é (os cionn == bréagach) {gl.style.opacity = "1"; setTimeout (feidhm () {gnáth ();}, 1500); }}
06. Ar ais go normáltacht
Níor cheart go bhfanfadh an éifeacht glitch mar bheadh sé ró-chráite don úsáideoir, ach mar ghné idirghníomhach oibríonn sé go maith. Anseo, athshocraíonn an cód an teimhneacht ar ais go nialas ionas nach mbeidh sé le feiceáil thar bharr an téacs.
feidhm gnáth () {gl.style.opacity = "0"; }
Faigh do thicéad do Generate New York anois
Tá imeacht dearadh gréasáin trí lá Generate New York ar ais. Ar siúl idir 25-27 Aibreán 2018, i measc na gcainteoirí ceannlíne tá Dan Mall SuperFriendly, comhairleoir beochana gréasáin Val Head, forbróir JavaScript lán-chruachta Wes Bos agus níos mó. Tá lá iomlán ceardlann agus deiseanna luachmhara líonraithe ann freisin - ná caill é. Faigh do thicéad Generate anois.
Foilsíodh an t-alt seo ar dtús in eagrán 270 den iris chruthaitheach dearadh gréasáin Web Designer. Ceannaigh eagrán 270 anseo nó liostáil le Dearthóir Gréasáin anseo.
