Skeleta ekrāni ir neatņemama apmeklētāju noturēšanas sastāvdaļa mūsdienu dizaina tendencēs. Tie rada ātruma ilūziju un pārvalda lietotāju cerības, informējot viņus par lapas satura statusu. Viens no būtiskākajiem, taču nepietiekami novērtētajiem risinājumiem, ko piedāvā skeleta ekrāni, ir to palīdzība, no kā izvairīties Kumulatīvā izkārtojuma maiņa (CLS), ļaujot saturu rādīt visu uzreiz, nevis secīgi slodzes.

Vai esat gatavs padarīt savas saskarnes intuitīvākas un izteiksmīgākas, savos projektos ieviešot skeleta ekrānus? Lūk, kā sākt darbu.

Izveidojiet tīmekļa lapas izkārtojumu

Tīmekļa lapas izkārtojuma izstrāde palīdz izprast jūsu cerības. Jums vajadzētu iestatīt savu mērķi, definēt izkārtojumu, pievienot visas nepieciešamās lapas un padarīt to pieejamu un reaģējošu dažādiem ekrāna izmēriem. Pagaidām apsveriet vienkāršu dizainu ar vāka attēlu, profila attēlu, nelielu tekstu un aicinājuma uz darbību pogām.

Kad esat izstrādājis izkārtojuma dizainu, izmantojot papīru vai lietotni, piemēram, Figma vai Adobe XD, ir pienācis laiks sagatavot HTML struktūru.

Izveidojiet pamata struktūru

Izveidojiet jaunu failu index.html un uzrakstiet kādu HTML izkārtojumam vecāklapā ar klase = "profila konteiners". Pievienot klase = "skelets" katram elementam, lai izmantotu skeleta ekrāna ielādes efektu. Kad saturs tiks ielādēts, izmantojot JavaScript, šī klase tiks noņemta.

Piezīme: neaizmirstiet saistīt CSS un JavaScript failus sava galvenē index.html failu.

Džons Dū

Programmatūras inženieris @ Google || Full Stack izstrādātājs || Pašmācība

Bengaluru, Karnataka, Indija • Kontaktinformācija


534 savienojumi






Ziņa
Vairāk

Sāciet veidot savu lapu

Izmantojiet pamata CSS atribūtus, piemēram, starpība, fontu ģimene, un krāsa pa visu ķermeni.

body {
 piemale: 0;
 fontu saime: Arial;
 krāsa: rgba (255, 255, 255, 0,9);
}

Pievienojiet ielādes efektu

Lai pievienotu ielādes efektu, pievienojiet ::pēcpseidoelements uz skeleta klasi, kas sekundes vai divu laikā pārvietojas no kreisās puses (-100%) uz labo (100%), tādējādi radot mirgojošu animāciju.

.skeleton {
 pozīcija: relatīvs;
 platums: maksimālais saturs;
 pārplūde: slēpta;
 apmales rādiuss: 4 pikseļi;
 fona krāsa: #1e2226 !svarīgi;
 krāsa: caurspīdīga !svarīgi;
 apmales krāsa: #1e2226 !svarīgi;
 lietotāja izvēle: nav;
 kursors: noklusējuma;
}
.skeleton img {
 necaurredzamība: 0;
}
.skeleton:: pēc {
 pozīcija: absolūta;
 augšā: 0;
 pa labi: 0;
 apakšā: 0;
 pa kreisi: 0;
 pārveidot: translateX(-100%);
 fona attēls: lineārs gradients (
 90 grādi,
 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)
 );
 animācija: shimmer 2s infinite;
 saturs: '';
}
@keyframes mirdzēt {
 100% {
 pārveidot: translateX(100%);
 }
}

Veidojiet attēlu stilu

Tagad veidosim profila un vāka attēla stilu. Neaizmirstiet iestatīt pārplūde: slēpta; lai izvairītos no jebkādām pretrunām.

img {
 platums: 100%;
 vertikāli izlīdzināt: vidū;
}
.profile-container {
 platums: 95%;
 maksimālais platums: 780 pikseļi;
 piemale: 0 auto;
 apmales rādiuss: 8 pikseļi;
 mala augšpusē: 32 pikseļi;
 fona krāsa: #1e2226;
 pārplūde: slēpta;
 pozīcija: relatīvs;
}
.cover-img {
 platums: 100%;
 pārplūde: slēpta;
 fona krāsa: #1e2226;
 malu attiecība: 4/1;
}
.profile-img {
 apmales rādiuss: 50%;
 platums: 160 pikseļi;
 augstums: 160 pikseļi;
 apmale: 4px solid #000;
 fona krāsa: #1e2226;
 piemale: 0 auto;
 pozīcija: relatīvs;
 pārplūde: slēpta;
 apakšā: 100 pikseļi;
}

Padariet to atsaucīgu

Lai pārliecinātos, ka jūsu dizains reaģē uz dažādiem ekrāniem, attiecīgi lietojiet multivides vaicājumus. Ja esat iesācējs tīmekļa izstrādē, jums vajadzētu mācīties kā izmantot multivides vaicājumus HTML un CSS jo tie ir ļoti svarīgi, veidojot adaptīvas vietnes.

@media (maksimālais platums: 560 pikseļi) {
 .profile-img {
 platums: 100 pikseļi;
 augstums: 100 pikseļi;
 apakšā: 60 pikseļi;
 }
}

Veidojiet teksta stilu

Veidojiet teksta stilu, iestatot a starpība, fonta izmērs, un fonta svars. Varat arī mainīt teksta krāsu, pievienot virsrakstu, rindkopu vai enkuru atzīmējiet atbilstoši savām vēlmēm. Kursora efekta pievienošana enkura tagam ir noderīga, jo tā ļauj lietotājam uzzināt par saiti.

.profile-text {
 mala augšpusē: -80 pikseļi;
 polsterējums: 0 16 pikseļi;
}
.profile-text h1 {
 mala-apakšā: 0;
 fonta izmērs: 24 pikseļi;
 pārplūde: slēpta;
}
.profile-text p {
 piemale: 4 pikseļi 0;
 pārplūde: slēpta;
}
.profile-text h5 {
 mala augšpusē: 4 pikseļi;
 fonta izmērs: 14 pikseļi;
 piemale-apakšā: 8 pikseļi;
 fonta svars: 400;
 krāsa: #ffffff99;
 pārplūde: slēpta;
}
.profile-text a {
 krāsa: #70b5f9;
 fonta izmērs: 14 pikseļi;
 teksta noformējums: nav;
 fonta svars: 600;
}
.profile-text a: virziet kursoru {
 krāsa: #70b5f9;
 teksta noformējums: pasvītrojums;
}

Veidojiet CTA stilu

Aicinājums uz darbību (CTA) ir svarīgs, jo parasti vēlaties kaut kādā veidā pārvērst savu lietotāju apmeklējumus. Piešķirot tai viegli pamanāmu krāsu, jūsu AUD izcelsies lapā.

.profile-cta {
 polsterējums: 16px 16px 32px;
 displejs: flex;
}
.profile-cta a {
 polsterējums: 6px 16px;
 apmales rādiuss: 24 pikseļi;
 teksta noformējums: nav;
 displejs: bloks;
}
.message-btn {
 fona krāsa: #70b5f9;
 krāsa: #000;
}
.more-btn {
 krāsa: iedzimta;
 apmale: 1 pikselis, rgba (255, 255, 255, 0,9);
 piemale-kreisais: 8 pikseļi;
}

Izvade:

Izslēdziet skeleta ielādes efektu, izmantojot JavaScript

Tagad, kad esat pievienojis vadošo efektu, izmantojot CSS, ir pienācis laiks to izslēgt, izmantojot JavaScript. Pēc noklusējuma animācija atkārtosies bezgalīgi daudz reižu, taču vēlaties, lai tā darbotos tikai dažas sekundes. Varat iestatīt laiku līdz 4000 milisekundēm, izmantojot setTimeout. Tas noņems skeleta klasi no visiem elementiem pēc 4 sekundēm.

Piezīme: noteikti pievienojiet īsi pirms beigām sadaļā.

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

Izvade:

Kas ir JavaScript un kā tas darbojas?

Jūs esat veiksmīgi izveidojis skeleta ekrāna ielādes efektu, izmantojot HTML, CSS un JavaScript. Tagad, kad kāds pieprasa jaunu saturu no servera, datu ielādes laikā varat parādīt skeleta ekrāna ielādes efektu. Tā kļūst arvien populārāka dizaina tendence, kā to var redzēt tādās vietnēs kā Google, Facebook un Slack.

Tikmēr, ja esat iesācējs JavaScript, varat apgūt pamatus, izprotot JavaScript un to, kā tas mijiedarbojas ar HTML un CSS.

Kas ir JavaScript un kā tas darbojas?

Ja apgūstat tīmekļa izstrādi, tālāk ir norādīts, kas jums jāzina par JavaScript un kā tas darbojas ar HTML un CSS.

Lasiet Tālāk

Par autoru