Kosturni ekrani sastavni su dio zadržavanja posjetitelja u modernim trendovima dizajna. Oni stvaraju iluziju brzine i upravljaju očekivanjima korisnika informirajući ih o statusu sadržaja stranice. Jedno od najvažnijih, ali podcijenjenih rješenja koja nude kosturni zasloni je njihova pomoć u izbjegavanju Kumulativni pomak rasporeda (CLS), dopuštajući sadržaju da se prikazuje odjednom, a ne uzastopno. opterećenja.

Jeste li spremni učiniti svoja sučelja intuitivnijim i izražajnijim implementacijom skeletnih zaslona u svoje projekte? Evo kako započeti.

Dizajnirajte izgled web stranice

Dizajniranje izgleda web stranice pomaže vam da kristalizirate svoja očekivanja. Trebali biste postaviti svoj cilj, definirati izgled, dodati sve potrebne stranice i učiniti ga pristupačnim i prilagodljivim za različite veličine zaslona. Za sada razmislite o jednostavnom dizajnu s naslovnom slikom, slikom profila, malo teksta i gumbima za poziv na radnju.

Nakon što ste izradili dizajn izgleda, bilo pomoću papira ili aplikacije kao što je Figma ili Adobe XD, vrijeme je da pripremite HTML strukturu.

Izgradite osnovnu strukturu

Napravite novu datoteku index.html i napišite HTML za izgled unutar roditelja s class=”profil-kontejner”. Dodati klasa=”kostur” na svaki element kako bi se primijenio efekt učitavanja kosturnog zaslona. Uklonit ćete ovu klasu kada se sadržaj učita pomoću JavaScripta.

Bilješka: Ne zaboravite povezati CSS i JavaScript datoteke u zaglavlju vašeg index.html datoteka.

John Doe

Softverski inženjer @ Google || Full Stack Developer || Samouk

Bengaluru, Karnataka, Indija • Kontakt informacije


534 veze






Poruka
Više

Počnite stilizirati svoju stranicu

Primijenite osnovne CSS atribute kao što su margina, obitelj fontova, i boja po cijelom tijelu.

tijelo {
 margina: 0;
 obitelj fontova: Arial;
 boja: rgba (255, 255, 255, 0,9);
}

Dodajte učinak učitavanja

Da biste dodali učinak učitavanja, dodajte an ::nakonpseudo-element na klasu kostura koja se pomiče slijeva (-100%) udesno (100%) tijekom sekunde ili dvije, što rezultira svjetlucavom animacijom.

.skelet {
 položaj: relativan;
 širina: max-sadržaj;
 prelijevanje: skriveno;
 radijus granice: 4px;
 boja pozadine: #1e2226 !važno;
 boja: prozirna !važno;
 border-color: #1e2226 !važno;
 korisnički odabir: nema;
 kursor: zadano;
}
.skelet img {
 neprozirnost: 0;
}
.skelet:: nakon {
 pozicija: apsolutna;
 vrh: 0;
 desno: 0;
 dno: 0;
 lijevo: 0;
 transform: translateX(-100%);
 pozadinska slika: linearni gradijent (
 90 stupnjeva,
 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: shimmer 2s infinite;
 sadržaj: '';
}
@ključni okviri svjetlucanje {
 100% {
 transformirati: translateX(100%);
 }
}

Stilizirajte slike

Sada stilizirajmo profil i naslovnu sliku. Ne zaboravite postaviti prelijevanje: skriveno; kako bi se izbjegle bilo kakve nedosljednosti.

img {
 širina: 100%;
 okomito poravnanje: sredina;
}
.profile-container {
 širina: 95%;
 maksimalna širina: 780px;
 margina: 0 auto;
 radijus granice: 8px;
 margin-top: 32px;
 boja pozadine: #1e2226;
 prelijevanje: skriveno;
 položaj: relativan;
}
.cover-img {
 širina: 100%;
 prelijevanje: skriveno;
 boja pozadine: #1e2226;
 omjer slike: 4/1;
}
.profile-img {
 radijus granice: 50%;
 širina: 160px;
 visina: 160px;
 obrub: 4px čvrsta #000;
 boja pozadine: #1e2226;
 margina: 0 auto;
 položaj: relativan;
 prelijevanje: skriveno;
 dno: 100px;
}

Učinite to responzivnim

Kako biste bili sigurni da vaš dizajn odgovara na različitim zaslonima, u skladu s tim primijenite medijske upite. Ako ste početnik u web razvoju, trebali biste naučiti kako koristiti medijske upite u HTML-u i CSS-u jer su vrlo važni pri izradi responzivnih web stranica.

@media (maks. širina: 560px) {
 .profile-img {
 širina: 100px;
 visina: 100px;
 dno: 60px;
 }
}

Stilizirajte tekst

Stilizirajte tekst postavljanjem a margina, veličina fonta, i font-weight. Također možete promijeniti boju teksta, dodati naslov, odlomak ili sidro označite prema vašim željama. Dodavanje efekta lebdenja u sidrišnu oznaku korisno je jer omogućuje korisniku da sazna za vezu.

.profile-text {
 margin-top: -80px;
 padding: 0 16px;
}
.profile-text h1 {
 margin-bottom: 0;
 veličina fonta: 24px;
 prelijevanje: skriveno;
}
.profile-text p {
 margina: 4px 0;
 prelijevanje: skriveno;
}
.profile-text h5 {
 margin-top: 4px;
 veličina fonta: 14px;
 margin-bottom: 8px;
 font-weight: 400;
 boja: #ffffff99;
 prelijevanje: skriveno;
}
.profile-text a {
 boja: #70b5f9;
 veličina fonta: 14px;
 tekst-dekoracija: nema;
 font-weight: 600;
}
.profile-text a: hover {
 boja: #70b5f9;
 tekst-ukras: podcrtaj;
}

Stilizirajte CTA

Poziv na radnju (CTA) važan je jer ćete općenito htjeti na neki način pretvoriti posjete svojih korisnika. Ako mu date lako uočljivu boju, vaš CTA će se istaknuti na stranici.

.profile-cta {
 padding: 16px 16px 32px;
 zaslon: flex;
}
.profile-cta a {
 padding: 6px 16px;
 radijus granice: 24px;
 tekst-dekoracija: nema;
 zaslon: blok;
}
.message-btn {
 boja pozadine: #70b5f9;
 boja: #000;
}
.more-btn {
 boja: naslijediti;
 obrub: 1px čvrsti rgba (255, 255, 255, 0,9);
 margin-left: 8px;
}

Izlaz:

Isključite efekt učitavanja kostura pomoću JavaScripta

Sada kada ste dodali vodeći efekt pomoću CSS-a, vrijeme je da ga isključite pomoću JavaScripta. Animacija će se prema zadanim postavkama ponoviti beskonačan broj puta, ali želite da se izvodi samo nekoliko sekundi. Možete postaviti vrijeme na 4000 milisekundi pomoću setTimeout. Uklonit će klasu kostura iz svih elemenata nakon 4 sekunde.

Bilješka: Obavezno dodajte neposredno prije kraja odjeljak.

const kosturi = document.querySelectorAll('.skelet')
kosturi.za svakog((kostur) => {
 setTimeout(() => {
kostur.classList.remove('kostur')
 }, 4000)
})

Izlaz:

Što je JavaScript i kako radi?

Uspješno ste stvorili efekt učitavanja kostura zaslona pomoću HTML-a, CSS-a i JavaScripta. Sada, kad god netko zatraži novi sadržaj s poslužitelja, možete prikazati efekt učitavanja kosturnog zaslona dok se podaci učitavaju. Postaje sve popularniji trend dizajna, kao što ga možete vidjeti na stranicama kao što su Google, Facebook i Slack.

U međuvremenu, ako ste novi u JavaScriptu, možete naučiti osnove razumijevanjem JavaScripta i njegove interakcije s HTML-om i CSS-om.

Što je JavaScript i kako radi?

Ako učite web razvoj, evo što trebate znati o JavaScriptu i kako funkcionira s HTML-om i CSS-om.

Pročitajte dalje

O autoru