Saturs
- 01. Pārvietošanas teksta efekts
- 02. Izveidojiet CSS
- 03. Novietojiet vārdu
- 04. Augšup un vairāk
- 05. Virzīšanās uz leju
- 06. Automātiska cilvēkiem
- 07. Pievienojiet pārmaiņus klases
Pārvietošanas saites ir lielisks veids, kā piesaistīt lietotāja uzmanību, it īpaši, ja viņi dara kaut ko neparastu vai oriģinālu. Vidējam bērnam ir lielisks, citur reti redzams efekts, kas notver katru burtu un sadala tos ar animāciju, kas sākas, kad apmeklētājs lidinās virs vārda. Animācija palīdz nodot sviestmaižu zīmola rotaļīgo raksturu.
Šajā rakstā mēs parādīsim, kā atjaunot ietekmi uz jūsu vietni. Lai iegūtu vairāk iedvesmas, apskatiet mūsu ceļvedi par labākajiem CSS animācijas piemēriem (ar instrukcijām, kā tos kodēt). Lai iegūtu kaut ko mazliet atšķirīgu, izmēģiniet labāko vietņu veidotāju vai izvēlieties labāko mākoņu krātuvi. Un, ja jūs padarāt savu vietni sarežģītāku, pārliecinieties, ka jūsu tīmekļa mitināšana ir paredzēta.
01. Pārvietošanas teksta efekts
Viens no lieliskajiem teksta efektiem vidējā bērna vietnē ir kursora efekti izvēlnē, kur burti sadalās pa tekstu un nedaudz pagriežas. Sāciet to ar dažiem vienkāršiem HTML tagiem.
div> div> Brokastis / div> / div>
02. Izveidojiet CSS
Izmantojiet atsevišķu CSS faila vai stila tagus, lai pievienotu šādus CSS noteikumus un liktu lapai aizpildīt pilnu pārlūka izmēru, nodrošinot, ka pamatteksts un iesaiņotājs aizņem visu pieejamo augstumu.
ķermenis {platums: 100%; augstums: 100%; starpība: 0; polsterējums: 0; } .wrapper {display: grid; augstums: 100%; }
03. Novietojiet vārdu
The vārdu klase centrē vārdu režģī. Jebkurš teksts, kuram tiek dota vārdu klasei to var piemērot. The uz augšu klase tiks piemērota katrai otrajai vēstulei, un tās virzīsies uz augšu.
.word {font-size: 3em; margin: auto auto; } .word .up {display: inline-block; pārveidot: translate3d (0px, 0px, 0px) pagriezt (0deg); pāreja: visu 0,5 sekunžu vieglā ieeja; }
04. Augšup un vairāk
Tagad uz leju klasei ir ļoti līdzīgi iestatījumi kā uz augšu bet kursors parāda kustību uz augšu uz augšu apgāšanās. Uz augšu arī nedaudz pagriež, lai uzlabotu izskatu.
.word .down {display: inline-block; pārveidot: translate3d (0px, 0px, 0px) pagriezt (0deg); pāreja: visu 0,5 sekunžu vieglā ieeja; } .vārds: virziet kursoru .up {pārveidot: translate3d (0px, -8px, 0px) pagriezt (12deg); krāsa: # 058b05}
05. Virzīšanās uz leju
Kad lietotājs novieto kursoru virs teksta, lejas klase pārvieto tekstu uz leju. Vēlāk JavaScript valodā teksts tiks sadalīts atsevišķos posmos ar klasēm, kas automātiski pievienotas pārmaiņus.
.word: virziet kursoru .down {pārveidot: translate3d (0px, 8px, 0px) pagriezt (-12deg); krāsa: # 058b05; }
06. Automātiska cilvēkiem
Nedaudz apgrūtina tas, ka katrs burts ir jāievieto pārmaiņus ar dažādām klasēm, tāpēc mēs automatizēsim procesu, liekot JavaScript vaicāt selektoram un paņemt katru burtu. Šeit str mainīgais satver pašreizējo burtu, kad tas pārvietojas pa tekstu.
skripts> var elements = document.querySelectorAll (’.word’); for (var i = 0, l = elements.length; i l; i ++) {var str = elements [i] .textContent; elementi [i] .innerHTML = ’’;
07. Pievienojiet pārmaiņus klases
Tagad vēl viena cilpa ievieto katru burtu savā laiduma elementā un pievieno vai nu uz augšu vai uz leju klasei uz laidumiem. Ja pārlūkprogrammā to apskatīsit, redzēsit teksta sadalījumu pa katru burtu uz augšu un uz leju, vienlaikus nedaudz pagriežot.
Efektu darbībā varat redzēt vidējā bērna vietnē.
for (var j = 0, ll = str.length; j ll; j ++) {var spn = document.createElement (’span’); elementi [i] .appendChild (spn); spn.textContent = str [j]; ļaujiet poz = (j% 2)? 'uz augšu uz leju'; spn.classList.add (pos); }} / skripts>
Šis raksts sākotnēji tika publicēts radošā tīmekļa dizaina žurnālā Mājas lapu dizaineris.Pērciet 286. numuru vai abonēt.
