Sisu
- 01. Üleminek tekstiefekt
- 02. Looge CSS
- 03. Paigutage sõna
- 04. Üles ja üle
- 05. Hõljumine allapoole
- 06. Rahva jaoks automaatne
- 07. Lisage vaheldumisi klassid
Üleminekulingid on suurepärane viis kasutaja tähelepanu äratamiseks, eriti kui nad teevad midagi ebatavalist või originaalset. Keskmisel lapsel on suurepärane efekt, mida mujal harva näeb, mis lööb iga tähe kinni ja jagab need animatsiooniga, mis saab alguse, kui külastaja hõljub sõna kohal. Animatsioon aitab edastada võileiva kaubamärgi mängulist iseloomu.
Selles artiklis me näitame teile, kuidas oma saidil mõju taastada. Inspiratsiooni saamiseks vaadake meie parimate CSS-i animatsiooninäidete juhendit (koos juhistega nende kodeerimiseks). Pisut teistsuguse jaoks proovige tipp-veebisaidi koostajat või meie valikut parimast pilvemälust. Ja kui muudate oma saiti keerukamaks, veenduge, et teie veebimajutus oleks täpne.
01. Üleminek tekstiefekt
Keskmise lapse veebisaidil on üks suurepäraseid tekstiefekte menüüs liikumise efektide jaoks, kus tähed jagunevad tekstil laiali ja pöörlevad veidi. Alustage seda mõne lihtsa HTML-märgendiga.
div> div> Hommikusöök / div> / div>
02. Looge CSS
Kasutage eraldi CSS-faili või stiilimärgendeid järgmiste CSS-reeglite lisamiseks ja lehe täitmiseks brauseri täissuuruses, tagades, et kere ja ümbris võtaksid kogu saadaoleva kõrguse.
keha {laius: 100%; kõrgus: 100%; varu: 0; polster: 0; } .wrapper {display: ruudustik; kõrgus: 100%; }
03. Paigutage sõna
The sõna klass koondab sõna ruudustikku. Mis tahes tekst, millele antakse sõna klassil saab seda rakendada. The üles klassi rakendatakse kõigile teistele tähtedele ja need liiguvad ülespoole.
.word {font-size: 3em; veeris: auto auto; } .word .up {display: inline-block; teisendus: translate3d (0px, 0px, 0px) pööramine (0deg); üleminek: kõik 0,5 sekundid hõlbustavad sisse-välja; }
04. Üles ja üle
Nüüd alla klass jagab seadmega väga sarnaseid seadeid üles kuid hõljuk näitab liikumist ülespoole üles ümberminek. Samuti pööratakse välimuse parandamiseks veidi ülespoole.
.word .down {display: inline-block; teisendus: translate3d (0px, 0px, 0px) pööramine (0deg); üleminek: kõik 0,5 sekundid hõlbustavad sisse-välja; } .sõna: hõljutage .up {transform: translate3d (0px, -8px, 0px) pöörake (12deg); värv: # 058b05}
05. Hõljumine allapoole
Kui kasutaja hõljub teksti kohal, liigutab alaklass teksti allapoole. Hiljem jagatakse JavaScripti tekst eraldi vahemikeks, kusjuures klassid lisatakse asendusliikmeteks automaatselt.
.sõna: hõljumine .down {muundamine: translate3d (0px, 8px, 0px) pööramine (-12deg); värv: # 058b05; }
06. Rahva jaoks automaatne
Pisut vaeva on vaja panna iga täht eri klassidega vaheldumisi, nii et me automatiseerime protsessi, saades JavaScripti valijale päringu esitamiseks ja iga tähe võtmiseks. Siin str muutuja haarab praeguse tähe, kui see teksti läbib.
skript> var elements = document.querySelectorAll (’.word’); for (var i = 0, l = elemendid.pikkus; i l; i ++) {var str = elemendid [i] .textContent; elemendid [i] .innerHTML = ’’;
07. Lisage vaheldumisi klassid
Nüüd paigutab teine silmus iga tähe oma span-elementi ja lisab kas tähe üles või alla klassi ulatub. Kui vaatate seda brauseris, näete teksti, mis on jaotatud iga tähe kaupa üles ja alla, samal ajal kergelt pöörates.
Selle efekti näete keskmise lapse veebisaidil.
for (var j = 0, ll = str.length; j ll; j ++) {var spn = document.createElement (’span’); elemendid [i] .appendChild (spn); spn.textContent = str [j]; olgu pos = (j% 2)? 'üles alla'; spn.clList.add (pos); }} / skript>
See artikkel ilmus algselt loomingulises veebidisaini ajakirjas Veebi disainer.Osta väljaanne 286 või telli.
