Sadržaj
- 01. Rollover tekstualni efekt
- 02. Stvorite CSS
- 03. Postavite riječ
- 04. Gore i više
- 05. Lebdeći dolje
- 06. Automatski za ljude
- 07. Dodajte izmjenične satove
Veze za premještanje sjajan su način da privučete pažnju korisnika, pogotovo ako rade nešto neobično ili originalno. Srednje dijete ima sjajan učinak, koji se rijetko viđa negdje drugdje, koji bilježi svako slovo i dijeli ih animacijom, koja započinje kad posjetitelj lebdi iznad riječi. Animacija pomaže u prenošenju razigranog karaktera marke sendviča.
U ovom ćemo vam članku pokazati kako ponovno stvoriti učinak na svojoj web lokaciji. Za više nadahnuća pogledajte naš vodič za najbolje primjere CSS animacije (s uputama kako ih kodirati). Za nešto malo drugačije, isprobajte vrhunskog graditelja web stranica ili naš izbor najbolje pohrane u oblaku. A ako svoju web stranicu usložnjavate, provjerite je li vaš web hosting na mjestu.
01. Rollover tekstualni efekt
Jedan od sjajnih tekstualnih efekata na web mjestu Middle Child odnosi se na efekte prevrtanja na izborniku, gdje se slova razdvajaju na tekstu i lagano rotiraju. Započnite ovo s nekoliko jednostavnih HTML oznaka.
div> div> Doručak / div> / div>
02. Stvorite CSS
Upotrijebite zasebnu CSS datoteku ili oznake stila da biste dodali sljedeća CSS pravila i učinili da stranica ispunjava punu veličinu preglednika osiguravajući da tijelo i omot zauzimaju punu visinu na raspolaganju.
tijelo {širina: 100%; visina: 100%; marža: 0; popunjavanje: 0; } .wrapper {prikaz: mreža; visina: 100%; }
03. Postavite riječ
The riječ razred centrira riječ u mreži. Bilo koji tekst kojem je dodan riječ razred može ovo primijeniti. The gore klasa će se primijeniti na svako drugo slovo i ona će se kretati prema gore.
.word {font-size: 3em; marža: auto auto; } .word .up {prikaz: inline-block; transformiraj: translate3d (0px, 0px, 0px) rotiraj (0deg); prijelaz: svih 0,5 s lakoća ulaska-van; }
04. Gore i više
Sada dolje razred dijeli vrlo slične postavke kao gore ali hover pokazuje kretanje prema gore za gore prevrtanje. Gore se također malo rotira kako bi se poboljšao izgled.
.word .down {prikaz: inline-block; transformirati: translate3d (0px, 0px, 0px) rotirati (0deg); prijelaz: svih 0,5 s lakoća ulaska-van; } .word: hover .up {transformiraj: translate3d (0px, -8px, 0px) rotiraj (12deg); boja: # 058b05}
05. Lebdeći dolje
Kad korisnik zadrži pokazivač iznad teksta, donja klasa pomiče tekst prema dolje. Kasnije će se u JavaScript-u tekst podijeliti u zasebne raspone, a klase će se automatski dodati u zamjenske raspone.
.word: hover .down {transformiraj: translate3d (0px, 8px, 0px) rotiraj (-12deg); boja: # 058b05; }
06. Automatski za ljude
Malo je gnjavaže morati svako slovo stavljati u izmjenične razmake s različitim klasama, pa ćemo automatizirati postupak dobivanjem JavaScript-a da traži selektor i uzima svako slovo. Ovdje str varijabla hvata trenutno slovo dok se petlja kroz tekst.
skripta> var elementi = document.querySelectorAll (’.word’); for (var i = 0, l = elements.length; i l; i ++) {var str = elements [i] .textContent; elementi [i] .innerHTML = ’’;
07. Dodajte izmjenične satove
Sada druga petlja stavlja svako slovo u svoj vlastiti element raspona i dodaje ili gore ili dolje razred do raspona. Ako ovo pogledate u pregledniku, vidjet ćete tekst podijeljen za svako slovo gore-dolje, dok se lagano rotira.
Učinak možete vidjeti na djelu na web mjestu Middle Child.
za (var j = 0, ll = str.length; j ll; j ++) {var spn = document.createElement (’raspon’); elementi [i] .appendChild (spn); spn.textContent = str [j]; neka je pos = (j% 2)? 'gore dolje'; spn.classList.add (pos); }} / skripta>
Ovaj je članak izvorno objavljen u časopisu kreativnog web dizajna Web dizajner.Kupi izdanje 286 ili pretplatite se.
