Ábhar
- 01. Éifeacht téacs rollaithe
- 02. Cruthaigh CSS
- 03. Seasamh an focal
- 04. Suas agus os a chionn
- 05. Ag cromadh síos
- 06. Uathoibríoch do na daoine
- 07. Cuir ranganna malartacha leis
Is bealach iontach iad naisc le rolladh amach chun aird úsáideora a thapú, go háirithe má dhéanann siad rud neamhghnách nó bunaidh. Tá éifeacht mhór ag Middle Child, nach bhfeictear go minic in áiteanna eile, a ghlacann gach litir agus a scoilteann óna chéile iad le beochan, a thosaíonn nuair a osclaíonn an cuairteoir an focal. Cuidíonn an beochan le carachtar spraíúil an bhranda ceapaire a chur in iúl.
San Airteagal seo, léirímid duit conas an éifeacht ar do shuíomh a athchruthú. Le haghaidh tuilleadh inspioráide, féach ar ár dtreoir maidir leis na samplaí beochana CSS is fearr (le treoracha ar conas iad a chódáil). Maidir le rud beagáinín difriúil, bain triail as tógálaí barr láithreáin ghréasáin nó ár rogha den stóráil scamall is fearr. Agus má tá tú ag déanamh do shuíomh níos casta, déan cinnte go bhfuil d’óstáil gréasáin ar an bpointe.
01. Éifeacht téacs rollaithe
Ceann de na héifeachtaí móra téacs ar shuíomh Gréasáin Middle Child is ea na héifeachtaí tar-rolladh ar an roghchlár, áit a scoilttear na litreacha óna chéile ar an téacs agus a rothlaíonn siad beagán. Tosaigh é seo le roinnt clibeanna HTML simplí.
div> div> Bricfeasta / div> / div>
02. Cruthaigh CSS
Úsáid comhad CSS nó clibeanna stíle ar leithligh chun na rialacha CSS seo a leanas a chur leis agus déan ar an leathanach méid iomlán an bhrabhsálaí a líonadh trína chinntiú go dtógann an corp agus an fillteán an airde iomlán atá ar fáil.
comhlacht {width: 100%; airde: 100%; corrlach: 0; stuáil: 0; } .wrapper {taispeáint: eangach; airde: 100%; }
03. Seasamh an focal
Tá an focal lárnaíonn rang an focal san eangach. Aon téacs a thugtar an focal is féidir é seo a chur i bhfeidhm sa rang. Tá an suas tá rang le cur i bhfeidhm ar gach litir eile agus bogfaidh siad seo aníos.
.word {font-size: 3em; corrlach: uathoibríoch uathoibríoch; } .word .up {taispeáint: inlíne-bloc; claochlú: rothlaigh translate3d (0px, 0px, 0px) (0deg); trasdul: gach 0.5s éasca le dul isteach; }
04. Suas agus os a chionn
Anois an síos scaireanna ranga socruithe an-chosúil leis an suas ach taispeánann an hover an ghluaiseacht aníos don suas tar-rolladh. Déantar rothlú aníos beagán freisin chun an cuma a fheabhsú.
.word .down {taispeáint: inlíne-bloc; claochlú: rothlaigh translate3d (0px, 0px, 0px) (0deg); trasdul: gach 0.5s éasca le dul isteach; } .word: rothlú .up {translate: translate3d (0px, -8px, 0px) rothlú (12deg); dath: # 058b05}
05. Ag cromadh síos
Nuair a osclaíonn an t-úsáideoir an téacs, bogann an aicme síos an téacs anuas. Níos déanaí i JavaScript roinnfear an téacs ina réisí ar leithligh agus cuirfear na ranganna go huathoibríoch le réisí malartacha.
.word: hover .down {translate: translate3d (0px, 8px, 0px) rothlú (-12deg); dath: # 058b05; }
06. Uathoibríoch do na daoine
Is beag an deacracht é gach litir a chur i réimeanna malartacha le ranganna éagsúla, mar sin déanfaimid an próiseas a uathoibriú trí JavaScript a fháil chun an roghnóir a cheistiú agus gach litir a thógáil. Seo an str glacann athróg an litir reatha agus í ag lúbadh tríd an téacs.
script> var elfennau = document.querySelectorAll (‘.word’); le haghaidh (var i = 0, l = element.length; i l; i ++) {var str = eilimintí [i] .textContent; eilimintí [i] .innerHTML = ’’;
07. Cuir ranganna malartacha leis
Anois cuireann lúb eile gach litir ina gné réise féin agus cuireann sí an suas nó síos rang go dtí na réisí. Má fhéachann tú air seo sa bhrabhsálaí feicfidh tú an téacs roinnte ag gach litir suas agus síos, agus tú ag rothlú beagán.
Is féidir leat an éifeacht i ngníomh a fheiceáil ar shuíomh Gréasáin Middle Child.
le haghaidh (var j = 0, ll = str.length; j ll; j ++) {var spn = document.createElement (‘span’); eilimintí [i] .appendChild (spn); spn.textContent = str [j]; lig pos = (j% 2)? 'suas síos'; spn.classList.add (pos); }} / script>
Foilsíodh an t-alt seo ar dtús san iris chruthaitheach um dhearadh gréasáin Dearthóir Gréasáin.Ceannaigh eagrán 286 nó liostáil.
