Skeleton ekraanid on tänapäevaste disainitrendide külastajate hoidmise lahutamatu osa. Need loovad illusiooni kiirusest ja juhivad kasutajate ootusi, hoides neid kursis lehe sisu olekuga. Üks olulisemaid, kuid alahinnatud lahendusi, mida skeletiekraanid pakuvad, on nende abi vältimisel Kumulatiivne paigutuse nihe (CLS), mis võimaldab sisu kuvada korraga, mitte järjestikku. koormused.

Kas olete valmis muutma oma liidesed intuitiivsemaks ja väljendusrikkamaks, rakendades oma projektides skeletiekraane? Siin on, kuidas alustada.

Kujundage veebilehe paigutus

Veebilehe paigutuse kujundamine aitab teil oma ootusi kristalliseeruda. Peaksite seadma oma eesmärgi, määratlema paigutuse, lisama kõik vajalikud lehed ning muutma selle erinevate ekraanisuuruste jaoks juurdepääsetavaks ja tundlikuks. Praegu kaaluge lihtsat kujundust kaanepildi, profiilipildi, väikese teksti ja tegevusele kutsuvate nuppudega.

Kui olete küljenduse kujunduse koostanud, kasutades paberit või rakendust, nagu Figma või Adobe XD, on aeg ette valmistada HTML-struktuur.

Ehitage põhistruktuur

Looge uus fail index.html ja kirjutage vanema sees paigutuse jaoks HTML-i koos klass=”profiilkonteiner”. Lisama klass = "skelett" igale elemendile, et rakendada skeleti ekraani laadimise efekti. Kui sisu laaditakse JavaScripti abil, eemaldate selle klassi.

Märge: ärge unustage linkida oma päises olevaid CSS- ja JavaScript-faile index.html faili.

John Doe

Tarkvarainsener @ Google || Full Stack Developer || Iseõppinud

Bengaluru, Karnataka, India • Kontaktinfo


534 ühendust






Sõnum
Rohkem

Alustage oma lehe kujundamist

Rakendage põhilisi CSS-i atribuute nagu marginaal, font-perekond, ja värvi üle kogu keha.

keha {
 marginaal: 0;
 fondiperekond: Arial;
 värv: rgba (255, 255, 255, 0,9);
}

Lisage laadimisefekt

Laadimisefekti lisamiseks lisage an ::pärastpseudoelement skeletiklassile, mis liigub sekundi või kahe jooksul vasakult (-100%) paremale (100%), mille tulemuseks on särav animatsioon.

.skeleton {
 asend: suhteline;
 laius: max-sisu;
 ülevool: peidetud;
 piiri raadius: 4 pikslit;
 background-color: #1e2226 !tähtis;
 värv: läbipaistev !tähtis;
 piirivärv: #1e2226 !tähtis;
 kasutaja valik: puudub;
 kursor: vaikimisi;
}
.skeleton img {
 läbipaistmatus: 0;
}
.skeleton:: pärast {
 positsioon: absoluutne;
 ülemine: 0;
 paremal: 0;
 alumine: 0;
 vasakule: 0;
 teisendus: translateX(-100%);
 taustapilt: lineaarne gradient(
 90 kraadi,
 rgba (255, 255, 255, 0) 0,
 rgba (255, 255, 255, 0,2) 20%,
 rgba (255, 255, 255, 0,5) 60%,
 rgba (255, 255, 255, 0)
 );
 animatsioon: shimmer 2s infinite;
 sisu: '';
}
@keyframes virvendama {
 100% {
 teisendus: translateX(100%);
 }
}

Stiilige pilte

Nüüd kujundame profiili ja kaanepildi stiili. Ärge unustage seadistada ülevool: peidetud; et vältida ebakõlasid.

img {
 laius: 100%;
 vertikaalne joondus: keskmine;
}
.profile-container {
 laius: 95%;
 maksimaalne laius: 780 pikslit;
 marginaal: 0 auto;
 piiri raadius: 8 pikslit;
 ülemine veeris: 32 pikslit;
 taustavärv: #1e2226;
 ülevool: peidetud;
 asend: suhteline;
}
.cover-img {
 laius: 100%;
 ülevool: peidetud;
 taustavärv: #1e2226;
 kuvasuhe: 4/1;
}
.profile-img {
 piiri raadius: 50%;
 laius: 160 pikslit;
 kõrgus: 160 pikslit;
 ääris: 4px solid #000;
 taustavärv: #1e2226;
 marginaal: 0 auto;
 asend: suhteline;
 ülevool: peidetud;
 alumine: 100px;
}

Muutke see reageerivaks

Veendumaks, et teie kujundus reageerib erinevatel ekraanidel, rakendage meediapäringuid vastavalt. Kui olete veebiarenduse algaja, peaksite õppima kuidas kasutada meediumipäringuid HTML-is ja CSS-is sest need on tundlike veebisaitide loomisel üliolulised.

@meedia (maksimaalne laius: 560 pikslit) {
 .profile-img {
 laius: 100 pikslit;
 kõrgus: 100 pikslit;
 alumine: 60px;
 }
}

Teksti stiil

Stiilige tekst, määrates a marginaal, fondi suurus, ja font-weight. Samuti saate muuta teksti värvi, lisada pealkirja, lõigu või ankru märgistage vastavalt teie eelistustele. Hõljutusefekti lisamine ankrusildile on kasulik, kuna see annab kasutajale lingist teada.

.profile-text {
 margin-top: -80px;
 polsterdus: 0 16px;
}
.profile-text h1 {
 veeris-alumine: 0;
 fondi suurus: 24 pikslit;
 ülevool: peidetud;
}
.profile-text p {
 veeris: 4 pikslit 0;
 ülevool: peidetud;
}
.profile-text h5 {
 veeris-ülaosa: 4 pikslit;
 fondi suurus: 14 pikslit;
 veeris-alumine: 8px;
 fondi kaal: 400;
 värv: #ffffff99;
 ülevool: peidetud;
}
.profile-text a {
 värv: #70b5f9;
 fondi suurus: 14 pikslit;
 tekst-kaunistus: puudub;
 fondi kaal: 600;
}
.profile-text a: hover {
 värv: #70b5f9;
 tekst-kaunistus: allajoonimine;
}

Stiilige CTA

Üleskutse tegevusele (CTA) on oluline, sest üldiselt soovite oma kasutajate külastusi mingil viisil muuta. Kergesti märgatava värvi andmine aitab teie CTA-l lehel silma paista.

.profile-cta {
 polsterdus: 16px 16px 32px;
 ekraan: flex;
}
.profile-cta a {
 polster: 6px 16px;
 piiri raadius: 24 pikslit;
 tekst-kaunistus: puudub;
 kuva: plokk;
}
.message-btn {
 taustavärv: #70b5f9;
 värv: #000;
}
.more-btn {
 värvus: pärida;
 ääris: 1px solid rgba (255, 255, 255, 0,9);
 veeris-vasak: 8px;
}

Väljund:

Lülitage JavaScripti abil välja skeleti laadimise efekt

Nüüd, kui olete CSS-i abil juhtefekti lisanud, on aeg see JavaScripti abil välja lülitada. Animatsiooni kordab vaikimisi lõpmatu arv kordi, kuid soovite, et see töötaks vaid mõne sekundi. Saate määrata aja 4000 millisekundile kasutades setTimeout. See eemaldab skeletiklassi kõigist elementidest 4 sekundi pärast.

Märge: Lisage kindlasti vahetult enne selle lõppu osa.

const skeletons = document.querySelectorAll('.skeleton')
skeletid.forEach((skelett) => {
 setTimeout(() => {
skelett.classList.remove('skelett')
 }, 4000)
})

Väljund:

Mis on JavaScript ja kuidas see töötab?

Olete edukalt loonud HTML-i, CSS-i ja JavaScripti abil ekraanikuva laadimise efekti. Nüüd, kui keegi soovib serverilt uut sisu, saate andmete laadimise ajal kuvada skeleti ekraani laadimise efekti. See on muutumas üha populaarsemaks disainitrendiks, nagu näete seda sellistel saitidel nagu Google, Facebook ja Slack.

Vahepeal, kui olete JavaScripti uustulnuk, saate põhitõdesid õppida, kui mõistate JavaScripti ja kuidas see HTML-i ja CSS-iga suhtleb.

Mis on JavaScript ja kuidas see töötab?

Kui õpite veebiarendust, siis siin on see, mida peate teadma JavaScripti kohta ning selle toimimisest HTML-i ja CSS-iga.

Loe edasi

Autori kohta