Vsebina
- 01. Učinek besedilnega prenosa
- 02. Ustvari CSS
- 03. Postavite besedo
- 04. Gor in čez
- 05. Lebdenje navzdol
- 06. Samodejno za ljudi
- 07. Dodajte izmenične razrede
Povezave za obnovitev so odličen način, da pritegnete pozornost uporabnika, še posebej, če naredijo kaj nenavadnega ali izvirnega. Srednji otrok ima odličen učinek, ki ga redko vidimo drugje, ki zajame vsako črko in jo razdeli z animacijo, ki se začne, ko obiskovalec lebdi nad besedo. Animacija pomaga prenesti igriv značaj blagovne znamke sendvič.
V tem članku vam pokažemo, kako poustvariti učinek na svojem spletnem mestu. Za več navdiha si oglejte naš vodnik do najboljših primerov animacije CSS (z navodili, kako jih kodirati). Za nekaj malce drugačnega poskusite z vrhunskim izdelovalcem spletnih mest ali z našo izbiro najboljšega prostora za shranjevanje v oblaku. Če vaše spletno mesto poosebljate, poskrbite, da bo vaše spletno gostovanje pravilno.
01. Učinek besedilnega prenosa
Eden odličnih besedilnih učinkov na spletnem mestu Middle Child je učinek prevračanja v meniju, kjer se črke na besedilu razdelijo in rahlo zasukajo. Začnite z nekaj preprostimi oznakami HTML.
div> div> zajtrk / div> / div>
02. Ustvari CSS
Uporabite ločeno datoteko CSS ali oznake sloga, da dodate naslednja pravila CSS in poskrbite, da bo stran zapolnila polno velikost brskalnika, tako da bosta telo in ovoj zajemala celotno višino.
telo {širina: 100%; višina: 100%; marža: 0; oblazinjenje: 0; } .wrapper {prikaz: mreža; višina: 100%; }
03. Postavite besedo
The beseda razred središče besede v mreži. Vsako besedilo, ki mu je dano beseda razred lahko to uporabi. The gor razred bo uporabljen za vsako drugo črko in te se bodo pomaknile navzgor.
.word {velikost pisave: 3em; marža: samodejno samodejno; } .word .up {display: inline-block; preoblikovanje: translate3d (0px, 0px, 0px) zasukaj (0deg); prehod: vseh 0,5-ih sprostitev; }
04. Gor in čez
Zdaj pa dol razred ima zelo podobne nastavitve kot gor vendar kazalec miške prikazuje gibanje navzgor za gor prevračanje. Za izboljšanje videza se tudi rahlo zasuka navzgor.
.word .down {prikaz: inline-block; pretvorba: translate3d (0px, 0px, 0px) zasuči (0deg); prehod: vseh 0,5-ih sprostitev; } .word: hover .up {preobrazba: translate3d (0px, -8px, 0px) zasukaj (12deg); barva: # 058b05}
05. Lebdenje navzdol
Ko uporabnik lebdi nad besedilom, spodnji razred premakne besedilo navzdol. Kasneje bo v JavaScript besedilo razdeljeno na ločene razpone, razredi pa se bodo samodejno dodali v nadomestne razpone.
.word: hover .down {transformiraj: translate3d (0px, 8px, 0px) zasukaj (-12deg); barva: # 058b05; }
06. Samodejno za ljudi
Malo težav je, če je treba vsako črko umestiti v izmenične razpone z različnimi razredi, zato bomo postopek avtomatizirali tako, da bomo JavaScript poizvedovali po izbirniku in vzeli vsako črko. Tukaj str spremenljivka zagrabi trenutno črko, ko se vrti skozi besedilo.
script> var elements = document.querySelectorAll ('.word'); for (var i = 0, l = elements.length; i l; i ++) {var str = elements [i] .textContent; elementi [i] .innerHTML = ’’;
07. Dodajte izmenične razrede
Zdaj druga zanka postavi vsako črko v svoj element span in doda bodisi gor ali dol razred do razponov. Če to pogledate v brskalniku, boste videli besedilo, razdeljeno za vsako črko gor in dol, medtem ko se bo rahlo vrtelo.
Učinek si lahko ogledate na spletni strani Middle Child.
for (var j = 0, ll = str.length; j ll; j ++) {var spn = document.createElement ('span'); elementi [i] .appendChild (spn); spn.textContent = str [j]; naj pos = (j% 2)? 'gor, dol'; spn.classList.add (pos); }} / script>
Ta članek je bil prvotno objavljen v reviji Creative Web Design Oblikovalec spletnih strani.Kupite številko 286 ali naročite se.
