Turinys
- 01. Pereinamojo teksto efektas
- 02. Sukurkite CSS
- 03. Padėkite žodį
- 04. Aukštyn ir aukštyn
- 05. Sklandymas žemyn
- 06. Automatinis žmonėms
- 07. Pridėkite pakaitomis klases
Viršelio nuorodos yra puikus būdas atkreipti vartotojo dėmesį, ypač jei jie daro kažką neįprasto ar originalaus. Vidurinis vaikas turi puikų efektą, retai matomą kitur, kuris užfiksuoja kiekvieną raidę ir suskirsto jas animacija, kuri įsijungia, kai lankytojas užveda ant žodžio. Animacija padeda perteikti žaismingą sumuštinių prekės ženklo charakterį.
Šiame straipsnyje mes parodysime, kaip atkurti poveikį jūsų svetainei. Norėdami gauti daugiau įkvėpimo, peržiūrėkite geriausių CSS animacijos pavyzdžių vadovą (su instrukcijomis, kaip juos koduoti). Norėdami sužinoti šiek tiek kitokį dalyką, išbandykite populiariausią svetainių kūrimo priemonę arba mūsų pasirinktą geriausią debesies saugyklą. Ir jei jūs darote savo svetainę sudėtingesnę, įsitikinkite, kad jūsų interneto priegloba yra tiksli.
01. Pereinamojo teksto efektas
Vienas iš puikiausių teksto efektų „Middle Child“ svetainėje yra pereinamasis poveikis meniu, kuriame raidės išsiskiria į tekstą ir šiek tiek pasisuka. Pradėkite tai naudodami keletą paprastų HTML žymių.
div> div> Pusryčiai / div> / div>
02. Sukurkite CSS
Naudokite atskirą CSS failą arba stiliaus žymes, kad pridėtumėte šias CSS taisykles ir priverstumėte puslapį užpildyti visą naršyklės dydį, užtikrindami, kad turinys ir apvalkalas užims visą turimą aukštį.
kūnas {plotis: 100%; aukštis: 100%; paraštė: 0; užpildas: 0; } .wrapper {display: grid; aukštis: 100%; }
03. Padėkite žodį
The žodis klasė sutelkia žodį į tinklelį. Bet koks tekstas, kuriam suteikiama žodis klasė gali tai pritaikyti. The aukštyn klasė bus taikoma kiekvienam kitam laiškui ir jie judės aukštyn.
.word {šrifto dydis: 3em; paraštė: auto auto; } .word .up {display: inline-block; transformuoti: translate3d (0px, 0px, 0px) pasukti (0deg); perėjimas: visi 0,5 sekundės palengvina išėjimą; }
04. Aukštyn ir aukštyn
Dabar žemyn klasės akcijos labai panašios į aukštyn bet pelės žymeklis rodo judėjimą aukštyn aukštyn apsiversti. Taip pat šiek tiek pasukama į viršų, kad pagerintų išvaizdą.
.word .down {display: inline-block; transformuoti: translate3d (0px, 0px, 0px) pasukti (0deg); perėjimas: visi 0,5 sekundės palengvina išėjimą; } .word: užveskite pelę .up {transformuoti: translate3d (0px, -8px, 0px) pasukti (12deg); spalva: # 058b05}
05. Sklandymas žemyn
Kai vartotojas užveda pelės žymeklį virš teksto, žemesnė klasė perkelia tekstą žemyn. Vėliau „JavaScript“ tekstas bus padalintas į atskirus ruožus, o klasės automatiškai pridedamos prie pakaitinių intervalų.
.word: užveskite .down {transformuoti: translate3d (0px, 8px, 0px) pasukti (-12deg); spalva: # 058b05; }
06. Automatinis žmonėms
Šiek tiek vargo tenka kiekvieną raidę dėti pakaitomis tarp skirtingų klasių, todėl mes automatizuosime procesą, paprašydami „JavaScript“ pateikti užklausą selektoriui ir paimti kiekvieną raidę. Čia str kintamasis griebia dabartinę raidę, kai ji pereina per tekstą.
scenarijus> var elementai = document.querySelectorAll (’.word’); for (var i = 0, l = elementai.ilgis; i l; i ++) {var str = elementai [i] .textContent; elementai [i] .innerHTML = ’’;
07. Pridėkite pakaitomis klases
Dabar kita kilpa įdeda kiekvieną raidę į savo span elementą ir prideda arba aukštyn arba žemyn klasę į ilgius. Pažvelgę į tai naršyklėje, pamatysite tekstą, padalytą kiekviena raide aukštyn ir žemyn, šiek tiek pasukdami.
Poveikį galite pamatyti „Middle Child“ svetainėje.
for (var j = 0, ll = str.length; j ll; j ++) {var spn = document.createElement (’span’); elementai [i] .appendChild (spn); spn.textContent = str [j]; tegul pos = (j% 2)? 'aukštyn žemyn'; spn.clList.add (pos); }} / scenarijus>
Šis straipsnis iš pradžių buvo paskelbtas kūrybinio interneto dizaino žurnale Interneto dizaineris.Pirkite 286 numerį arba Prenumeruoti.
