Përmbajtje
- 01. Efekti i tekstit Rollover
- 02. Krijoni CSS
- 03. Poziciononi fjalën
- 04. Lart e mbi
- 05. Rri pezull
- 06. Automatike për njerëzit
- 07. Shto klasa alternative
Lidhjet Rollover janë një mënyrë e shkëlqyeshme për të tërhequr vëmendjen e një përdoruesi, veçanërisht nëse ato bëjnë diçka të pazakontë ose origjinale. Fëmija i Mesëm ka një efekt të shkëlqyeshëm, që rrallë shihet diku tjetër, që kap çdo shkronjë dhe i ndan ato me animacion, i cili fillon kur vizitori qëndron mbi fjalën. Animacioni ndihmon në përcjelljen e karakterit të gjallë të markës sanduiç.
Në këtë artikull, ne ju tregojmë se si të rikrijoni efektin në faqen tuaj. Për më shumë frymëzim, hidhni një vështrim në udhëzuesin tonë për shembujt më të mirë të animacionit CSS (me udhëzime se si t'i kodoni ato). Për diçka pak më ndryshe, provoni një ndërtues të lartë të faqeve të internetit ose zgjedhjen tonë të hapësirës ruajtëse më të mirë. Dhe nëse jeni duke e bërë faqen tuaj më komplekse, sigurohuni që mbajtja juaj e internetit të jetë në rregull.
01. Efekti i tekstit Rollover
Një nga efektet e shkëlqyera të tekstit në faqen e internetit të Fëmijëve të Mesëm është për efektet e rrokullisjes në menu, ku shkronjat ndahen veçmas në tekst dhe rrotullohen pak. Filloni këtë me disa etiketa të thjeshta HTML.
div> div> Mëngjesi / div> / div>
02. Krijoni CSS
Përdorni një skedar të veçantë CSS ose etiketat e stilit për të shtuar rregullat e mëposhtme CSS dhe bëni që faqja të mbushë madhësinë e plotë të shfletuesit duke siguruar që trupi dhe mbështjellësi të marrin në dispozicion lartësinë e plotë.
trupi {gjerësia: 100%; lartësia: 100%; diferencë: 0; mbushje: 0; } .wrapper {shfaqja: rrjeti; lartësia: 100%; }
03. Poziciononi fjalën
fjale klasa e përqendron fjalën në rrjet. Çdo tekst që është dhënë fjale klasa mund ta ketë këtë të zbatuar. lart klasa do të zbatohet për çdo shkronjë tjetër dhe këto do të lëvizin lart.
.fjala {font-size: 3em; diferencë: auto auto; } .fjalë .up {display: inline-block; transformoj: translate3d (0px, 0px, 0px) rotate (0deg); tranzicioni: të gjitha lehtësitë e largimit të 0,5s; }
04. Lart e mbi
Tani poshtë klasa ndan cilësime shumë të ngjashme me lart por rri pezull tregon lëvizjen lart për lart rrokulliset mbi. Për lart është rrotulluar paksa për të përmirësuar pamjen.
.fjalë. poshtë {display: inline-block; transformoj: translate3d (0px, 0px, 0px) rotate (0deg); tranzicioni: të gjitha lehtësitë e largimit të 0,5s; } .fjala: rri pezull .up {transformo: translate3d (0px, -8px, 0px) rrotullo (12deg); ngjyra: # 058b05}
05. Rri pezull
Kur përdoruesi rri pezull mbi tekst, klasa poshtë lëviz tekstin poshtë. Më vonë në JavaScript teksti do të ndahet në hapësira të ndara me klasat e shtuara automatikisht në shtrirjet alternative.
.fjala: rri pezull. poshtë {transformo: translate3d (0px, 8px, 0px) rotate (-12deg); ngjyra: # 058b05; }
06. Automatike për njerëzit
Ashtë pak sherr që duhet të vendosni çdo shkronjë në hapësira të alternuara me klasa të ndryshme, kështu që ne do ta automatizojmë procesin duke marrë JavaScript për të pyetur përzgjedhësin dhe për të marrë secilën shkronjë. Këtu rr variabla kap letrën aktuale ndërsa përshkon tekstin.
skript> var elemente = dokument.pyetjeSelectorAll ('.fjalë'); për (var i = 0, l = elemente.gjatësia; i l; i ++) {var str = elementet [i] .textPërmbajtja; elementet [i] .innerHTML = ’’;
07. Shto klasa alternative
Tani një lak tjetër vendos secilën shkronjë në elementin e vet të hapësirës dhe shton ose një lart ose poshtë klasa në shtrirje. Nëse e shikoni këtë në shfletuesin do të shihni tekstin të ndarë nga secila shkronjë lart e poshtë, ndërsa rrotullohet pak.
Ju mund ta shihni efektin në veprim në faqen e internetit të Fëmijëve të Mesëm.
për (var j = 0, ll = gjatësia e gjatësisë; j ll; j ++) {var spn = dokumenti.krijimiElement ('hapësira'); elementet [i] .appendChild (spn); spn.textContent = str [j]; le pos = (j% 2)? 'Lart': 'poshtë'; spn.classList.add (pos); }} / skenari>
Ky artikull u botua fillimisht në revistën krijuese të krijimit të uebit Projektues Uebi.Bleni numrin 286 ose pajtohem.
