Ecranele schelete sunt o parte integrantă a reținerii vizitatorilor în tendințele moderne de design. Ele creează o iluzie de viteză și gestionează așteptările utilizatorilor ținându-i informați despre starea conținutului unei pagini. Una dintre cele mai esențiale, dar subestimate soluții pe care le oferă ecranele schelet, este ajutorul lor în evitare Schimbarea aspectului cumulativ (CLS), permițând conținutului să se afișeze dintr-o dată, mai degrabă decât secvenţial, așa cum este încărcături.

Sunteți gata să vă faceți interfețele mai intuitive și mai expresive prin implementarea ecranelor schelet în propriile proiecte? Iată cum să începeți.

Proiectați aspectul paginii web

Proiectarea unui aspect de pagină web vă ajută să vă cristalizați așteptările. Ar trebui să vă stabiliți obiectivul, să definiți aspectul, să adăugați orice pagini necesare și să îl faceți accesibil și receptiv pentru diferite dimensiuni de ecran. Pentru moment, luați în considerare un design simplu, cu o imagine de copertă, o imagine de profil, puțin text și butoane de îndemn.

Odată ce ați elaborat designul aspectului, fie folosind hârtie, fie o aplicație precum Figma sau Adobe XD, este timpul să pregătiți structura HTML.

Construiți structura de bază

Creați un fișier nou index.html și scrieți ceva HTML pentru aspectul în interiorul unui părinte cu class="container-profil". Adăuga clasa=”schelet” fiecărui element pentru a aplica efectul de încărcare a ecranului schelet. Veți elimina această clasă atunci când conținutul este încărcat folosind JavaScript.

Notă: Nu uitați să conectați fișierele CSS și JavaScript în antetul dvs index.html fişier.

John Doe

Inginer software @ Google || Dezvoltator Full Stack || Autodidact

Bengaluru, Karnataka, India • Informatii de contact


534 conexiuni






Mesaj
Mai mult

Începeți să vă stilați pagina

Aplicați atributele de bază CSS, cum ar fi marginea, familie de fonturi, și culoare pe tot corpul.

corp {
 marja: 0;
 familie de fonturi: Arial;
 culoare: rgba (255, 255, 255, 0,9);
}

Adăugați efect de încărcare

Pentru a adăuga un efect de încărcare, adăugați un ::dupăpseudo-element la clasa schelet care se deplasează de la stânga (-100%) la dreapta (100%) timp de o secundă sau două, rezultând o animație strălucitoare.

.schelet {
 poziție: relativă;
 lățime: max-conținut;
 preaplin: ascuns;
 chenar-rază: 4px;
 culoare de fundal: #1e2226 !important;
 culoare: transparent !important;
 culoare-chenar: #1e2226 !important;
 user-select: niciunul;
 cursor: implicit;
}
.schelet img {
 opacitate: 0;
}
.schelet:: după {
 poziție: absolută;
 sus: 0;
 dreapta: 0;
 jos: 0;
 stânga: 0;
 transforma: translateX(-100%);
 imagine de fundal: gradient liniar(
 90 de grade,
 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)
 );
 animație: shimmer 2s infinit;
 continut: '';
}
@keyframes strălucire {
 100% {
 transforma: translateX(100%);
 }
}

Stilați imaginile

Acum, să stilăm imaginea de profil și de copertă. Nu uitați să setați preaplin: ascuns; pentru a evita orice neconcordanțe.

img {
 latime: 100%;
 vertical-align: mijloc;
}
.profile-container {
 latime: 95%;
 lățime maximă: 780px;
 marja: 0 auto;
 chenar-rază: 8px;
 margine-sus: 32px;
 culoare de fundal: #1e2226;
 preaplin: ascuns;
 poziție: relativă;
}
.copertă-img {
 latime: 100%;
 preaplin: ascuns;
 culoare de fundal: #1e2226;
 raport de aspect: 4 / 1;
}
.profile-img {
 raza-limită: 50%;
 latime: 160px;
 înălțime: 160px;
 chenar: 4px solid #000;
 culoare de fundal: #1e2226;
 marja: 0 auto;
 poziție: relativă;
 preaplin: ascuns;
 jos: 100px;
}

Faceți-l receptiv

Pentru a vă asigura că designul dvs. răspunde pe diferite ecrane, aplicați interogări media în consecință. Dacă ești începător în dezvoltarea web, ar trebui să înveți cum să utilizați interogări media în HTML și CSS pentru că sunt foarte importante atunci când construiești site-uri web receptive.

@media (lățime maximă: 560 px) {
 .profile-img {
 lățime: 100px;
 înălțime: 100px;
 jos: 60px;
 }
}

Stilați textul

Stilați textul setând a marginea, marimea fontului, și grosimea fontului. De asemenea, puteți schimba culoarea textului, puteți adăuga un titlu, un paragraf sau o ancoră etichetați în funcție de preferințele dvs. Adăugarea unui efect de trecere la eticheta de ancorare este utilă, deoarece informează utilizatorul despre un link.

.profil-text {
 margin-top: -80px;
 umplutură: 0 16px;
}
.profil-text h1 {
 margine-jos: 0;
 dimensiunea fontului: 24px;
 preaplin: ascuns;
}
.profil-text p {
 marjă: 4px 0;
 preaplin: ascuns;
}
.profil-text h5 {
 margine-sus: 4px;
 dimensiunea fontului: 14px;
 margine-jos: 8px;
 greutate font: 400;
 culoare: #ffffff99;
 preaplin: ascuns;
}
.profil-text a {
 culoare: #70b5f9;
 dimensiunea fontului: 14px;
 text-decor: niciuna;
 greutate font: 600;
}
.profile-text a: hover {
 culoare: #70b5f9;
 text-decor: subliniere;
}

Stilează CTA

Un îndemn la acțiune (CTA) este important deoarece, în general, veți dori să convertiți vizitele utilizatorilor dvs. într-un fel. Oferirea unei culori ușor de observat vă va ajuta CTA să iasă în evidență pe pagină.

.profile-cta {
 umplutură: 16px 16px 32px;
 display: flex;
}
.profile-cta a {
 umplutură: 6px 16px;
 chenar-rază: 24px;
 text-decor: niciuna;
 afisare: bloc;
}
.message-btn {
 culoare de fundal: #70b5f9;
 culoare: #000;
}
.more-btn {
 culoare: mostenire;
 chenar: 1px rgba solid (255, 255, 255, 0,9);
 margine-stânga: 8px;
}

Ieșire:

Dezactivați efectul de încărcare a scheletului folosind JavaScript

Acum că ați adăugat efectul principal folosind CSS, este timpul să îl dezactivați folosind JavaScript. Animația se va repeta de un număr infinit de ori în mod implicit, dar doriți să ruleze doar pentru câteva secunde. Puteți seta timpul la 4000 de milisecunde folosind setTimeout. Va elimina clasa schelet din toate elementele după 4 secunde.

Notă: Asigurați-vă că adăugați chiar înainte de sfârșitul secțiune.

const schelete = document.querySelectorAll('.skeleton')
schelete.forEach((schelet) => {
 setTimeout(() => {
schelet.classList.remove('schelet')
 }, 4000)
})

Ieșire:

Ce este JavaScript și cum funcționează?

Ați creat cu succes un efect de încărcare a ecranului schelet folosind HTML, CSS și JavaScript. Acum, ori de câte ori cineva solicită conținut nou de la server, puteți afișa efectul de încărcare a ecranului schelet în timp ce datele se încarcă. Devine din ce în ce o tendință de design populară, așa cum o puteți vedea pe site-uri precum Google, Facebook și Slack.

Între timp, dacă sunteți nou în JavaScript, puteți învăța elementele de bază înțelegând JavaScript și modul în care acesta interacționează cu HTML și CSS.

Ce este JavaScript și cum funcționează?

Dacă înveți dezvoltarea web, iată ce trebuie să știi despre JavaScript și cum funcționează cu HTML și CSS.

Citiți în continuare

Despre autor