Efni.
- 01. Textiáhrif veltingur
- 02. Búðu til CSS
- 03. Staða orðið
- 04. Upp og aftur
- 05. Sveima niður
- 06. Sjálfvirkt fyrir fólkið
- 07. Bæta við skiptitímum
Rollover tenglar eru frábær leið til að vekja athygli notanda, sérstaklega ef þeir gera eitthvað óvenjulegt eða frumlegt. Middle Child hefur mikil áhrif, sjaldan sem sést annars staðar, sem tekur hvern staf og kljúfur þá í sundur með fjörum, sem sparka í þegar gesturinn svífur yfir orðinu. Hreyfimyndin hjálpar til við að miðla glettnum karakter samlokumerkisins.
Í þessari grein sýnum við þér hvernig á að endurskapa áhrifin á síðuna þína. Til að fá meiri innblástur, skoðaðu leiðarvísir okkar um bestu CSS fjör dæmi (með leiðbeiningum um hvernig á að kóða þau). Fyrir eitthvað svolítið öðruvísi skaltu prófa vefsíðuhönnuð eða velja bestu skýjageymsluna. Og ef þú ert að gera síðuna þína flóknari skaltu ganga úr skugga um að vefþjónusta þín sé á punktinum.
01. Textiáhrif veltingur
Einn af frábærum textaáhrifum á vefsíðu Middle Child er fyrir veltingur áhrif á matseðlinum, þar sem stafirnir klofna í sundur á textanum og snúast aðeins. Byrjaðu þetta með nokkrum einföldum HTML merkjum.
div> div> Morgunmatur / div> / div>
02. Búðu til CSS
Notaðu sérstaka CSS skrá eða stílmerki til að bæta við eftirfarandi CSS reglum og láttu síðuna fylla í fullri stærð vafrans með því að tryggja að meginmálið og umbúðirnar taki fulla hæð sem er í boði.
líkami {breidd: 100%; hæð: 100%; framlegð: 0; bólstrun: 0; }. umbúðir {skjámynd: rist; hæð: 100%; }
03. Staða orðið
The orð bekkur miðar orðið í ristinu. Allur texti sem er gefinn orð bekk getur látið þetta gilda. The upp bekknum verður beitt á annan hvern staf og þessir munu hreyfast upp á við.
.word {leturstærð: 3em; framlegð: sjálfvirkt farartæki; } .word .up {skjámynd: inline-block; umbreyta: translate3d (0px, 0px, 0px) snúa (0deg); umskipti: allir 0,5s vellíðan út; }
04. Upp og aftur
Nú er niður bekkur deilir mjög svipuðum stillingum og upp en sveima sýnir hreyfinguna upp fyrir upp Veltu þér. Uppúr er einnig snúið lítillega til að auka útlitið.
.word .down {display: inline-block; umbreyta: translate3d (0px, 0px, 0px) snúa (0deg); umskipti: allir 0,5s vellíðan-út-út; } .word: sveima .up {umbreyta: translate3d (0px, -8px, 0px) snúa (12deg); litur: # 058b05}
05. Sveima niður
Þegar notandinn svífur yfir textanum færir niður bekkurinn textann niður á við. Síðar í JavaScript verður textanum skipt í aðskildar spannir með flokkunum bætt sjálfkrafa við til viðbótar spannar.
.word: sveima .down {transform: translate3d (0px, 8px, 0px) snúa (-12deg); litur: # 058b05; }
06. Sjálfvirkt fyrir fólkið
Það er svolítið vesen að þurfa að setja hvern og einn staf í víxl til skiptis með mismunandi flokkum, svo við gerum sjálfvirkan hátt með því að fá JavaScript til að spyrja valtann og taka hvern staf. Hér er str breytu grípur núverandi staf þar sem hann fer í gegnum textann.
handrit> var þættir = document.querySelectorAll (’.word’); fyrir (var i = 0, l = element.length; i l; i ++) {var str = element [i] .textContent; frumefni [i] .innerHTML = ’’;
07. Bæta við skiptitímum
Nú setur önnur lykkja hvern bókstaf í sitt spanþátt og bætir annað hvort við upp eða niður bekk að spönnunum. Ef þú horfir á þetta í vafranum sérðu að textanum er skipt með hverjum bókstöfum upp og niður en snúið aðeins.
Þú getur séð áhrifin í aðgerð á vefsíðu Middle Child.
fyrir (var j = 0, ll = str.length; j ll; j ++) {var spn = document.createElement (’span’); frumefni [i] .appendChild (spn); spn.textContent = str [j]; láta pos = (j% 2)? 'upp niður'; spn.classList.add (pos); }} / handrit>
Þessi grein var upphaflega birt í skapandi tímariti um vefhönnun Vefhönnuður.Kaupa tölublað 286 eða gerast áskrifandi.
