Okostje zasloni so sestavni del zadrževanja obiskovalcev v sodobnih oblikovalskih trendih. Ustvarjajo iluzijo hitrosti in upravljajo pričakovanja uporabnikov, tako da jih obveščajo o statusu vsebine strani. Ena najpomembnejših, a podcenjenih rešitev, ki jih ponujajo skeletni zasloni, je njihova pomoč pri izogibanju Kumulativni premik postavitve (CLS), ki omogoča, da se vsebina prikaže naenkrat in ne zaporedno. obremenitve.

Ste pripravljeni narediti svoje vmesnike bolj intuitivne in izrazne z implementacijo okostnih zaslonov v svoje projekte? Tukaj je opisano, kako začeti.

Oblikujte postavitev spletne strani

Oblikovanje postavitve spletne strani vam pomaga kristalizirati vaša pričakovanja. Določiti morate svoj cilj, določiti postavitev, dodati vse zahtevane strani in omogočiti dostopnost in odzivnost za različne velikosti zaslona. Za zdaj razmislite o preprostem dizajnu s sliko za naslovnico, sliko profila, malo besedila in gumbi za poziv k dejanju.

Ko ste sestavili zasnovo postavitve, bodisi s papirjem ali aplikacijo, kot sta Figma ali Adobe XD, je čas, da pripravite strukturo HTML.

Zgradite osnovno strukturo

Ustvarite novo datoteko index.html in napišite nekaj HTML-ja za postavitev znotraj nadrejenega z class=”profil-vsebnik”. Dodaj razred = "skelet" vsakemu elementu, da se uporabi učinek nalaganja okostja zaslona. Ta razred boste odstranili, ko se vsebina naloži s pomočjo JavaScripta.

Opomba: Ne pozabite povezati datotek CSS in JavaScript v glavi vašega index.html mapa.

John Doe

Programski inženir @ Google || Razvijalec celotnega sklada || Samouk

Bengaluru, Karnataka, Indija • Kontaktne informacije


534 povezav






Sporočilo
Več

Začnite oblikovati svojo stran

Uporabite osnovne atribute CSS, kot je marža, družina pisav, in barva po celem telesu.

telo {
 marža: 0;
 družina pisav: Arial;
 barva: rgba (255, 255, 255, 0,9);
}

Dodajte učinek nalaganja

Če želite dodati učinek nalaganja, dodajte :: potempsevdoelement razredu okostja, ki se v sekundi ali dveh premakne z leve (-100 %) na desno (100 %), kar ima za posledico svetlečo animacijo.

.skeleton {
 položaj: relativni;
 širina: max-content;
 prelivanje: skrito;
 radij obrobe: 4px;
 barva ozadja: #1e2226 !pomembno;
 barva: prozorna !pomembno;
 barva obrobe: #1e2226 !pomembno;
 uporabniški izbor: brez;
 kazalec: privzeto;
}
.skeleton img {
 motnost: 0;
}
.skeleton:: po {
 položaj: absolutni;
 vrh: 0;
 desno: 0;
 spodaj: 0;
 levo: 0;
 transform: translateX(-100%);
 slika ozadja: linearni gradient (
 90 stopinj,
 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)
 );
 animacija: šimer 2s neskončno;
 vsebina: '';
}
@ključni okvirji šimer {
 100% {
 transform: translateX(100%);
 }
}

Oblikujte slike

Zdaj pa oblikujemo profil in naslovno sliko. Ne pozabite nastaviti prelivanje: skrito; da bi se izognili kakršnim koli nedoslednostim.

img {
 širina: 100 %;
 navpična poravnava: sredina;
}
.profile-container {
 širina: 95 %;
 največja širina: 780px;
 marža: 0 samodejno;
 radij obrobe: 8px;
 rob-vrh: 32px;
 barva ozadja: #1e2226;
 prelivanje: skrito;
 položaj: relativni;
}
.cover-img {
 širina: 100 %;
 prelivanje: skrito;
 barva ozadja: #1e2226;
 razmerje stranic: 4/1;
}
.profile-img {
 obrobni polmer: 50 %;
 širina: 160px;
 višina: 160px;
 obroba: 4px trdna #000;
 barva ozadja: #1e2226;
 marža: 0 samodejno;
 položaj: relativni;
 prelivanje: skrito;
 spodaj: 100px;
}

Naj bo odziven

Če želite zagotoviti, da se vaš dizajn odziva na različne zaslone, ustrezno uporabite medijske poizvedbe. Če ste začetnik spletnega razvoja, se morate naučiti kako uporabljati medijske poizvedbe v HTML in CSS ker so zelo pomembni pri gradnji odzivnih spletnih mest.

@media (največja širina: 560 slikovnih pik) {
 .profile-img {
 širina: 100px;
 višina: 100px;
 spodaj: 60 slikovnih pik;
 }
}

Oblikujte besedilo

Oblikujte besedilo tako, da nastavite a marža, velikost pisave, in font-weight. Prav tako lahko spremenite barvo besedila, dodate naslov, odstavek ali sidro označite po svojih željah. Dodajanje učinka lebdenja sidrni oznaki je koristno, ker uporabniku sporoči povezavo.

.profile-text {
 rob-vrh: -80px;
 padding: 0 16px;
}
.profile-text h1 {
 rob-dno: 0;
 velikost pisave: 24px;
 prelivanje: skrito;
}
.profile-text p {
 rob: 4px 0;
 prelivanje: skrito;
}
.profile-text h5 {
 rob-vrh: 4px;
 velikost pisave: 14px;
 rob-dno: 8px;
 teža pisave: 400;
 barva: #ffffff99;
 prelivanje: skrito;
}
.profile-text a {
 barva: #70b5f9;
 velikost pisave: 14px;
 besedilna dekoracija: brez;
 teža pisave: 600;
}
.profile-text a: hover {
 barva: #70b5f9;
 okras besedila: podčrtaj;
}

Oblikujte CTA

Poziv k dejanju (CTA) je pomemben, ker boste na splošno želeli na nek način pretvoriti obiske svojih uporabnikov. Če ji boste dali lahko opazno barvo, bo vaš CTA izstopal na strani.

.profile-cta {
 padding: 16px 16px 32px;
 zaslon: flex;
}
.profile-cta a {
 padding: 6px 16px;
 polmer obrobe: 24 slikovnih pik;
 besedilna dekoracija: brez;
 zaslon: blok;
}
.message-btn {
 barva ozadja: #70b5f9;
 barva: #000;
}
.more-btn {
 barva: podedovati;
 obroba: 1px trdna rgba (255, 255, 255, 0,9);
 rob-levo: 8px;
}

Izhod:

Izklopite učinek nalaganja okostja z uporabo JavaScript

Zdaj, ko ste s CSS dodali vodilni učinek, je čas, da ga izklopite z uporabo JavaScripta. Animacija se bo privzeto ponovila neskončno število krat, vendar želite, da se izvaja le nekaj sekund. Z uporabo lahko nastavite čas na 4000 milisekund setTimeout. Po 4 sekundah bo odstranil razred okostja iz vseh elementov.

Opomba: Ne pozabite dodati tik pred koncem oddelek.

const okostja = document.querySelectorAll('.skelet')
okostnjaki.forEach((okostje) => {
 setTimeout(() => {
okostje.classList.remove('skelet')
 }, 4000)
})

Izhod:

Kaj je JavaScript in kako deluje?

Uspešno ste ustvarili učinek nalaganja okostja zaslona z uporabo HTML, CSS in JavaScript. Zdaj, ko kdorkoli zahteva novo vsebino s strežnika, lahko med nalaganjem podatkov prikažete učinek nalaganja okostja zaslona. Postaja vse bolj priljubljen trend oblikovanja, saj ga lahko vidite na spletnih mestih, kot so Google, Facebook in Slack.

Medtem, če ste novi v JavaScriptu, se lahko naučite osnov tako, da razumete JavaScript in kako deluje s HTML in CSS.

Kaj je JavaScript in kako deluje?

Če se učite spletnega razvoja, morate vedeti o JavaScriptu in o tem, kako deluje s HTML in CSS.

Preberite Naprej

O avtorju