Skeleton-näytöt ovat olennainen osa vierailijoiden säilyttämistä nykyaikaisissa designtrendeissä. Ne luovat illuusion nopeudesta ja hallitsevat käyttäjien odotuksia pitämällä heidät ajan tasalla sivun sisällön tilasta. Yksi tärkeimmistä mutta aliarvioituista ratkaisuista, joita luurankonäytöt tarjoavat, on niiden apu niiden välttämisessä Kumulatiivinen asettelumuutos (CLS), jonka avulla sisältö voidaan näyttää kerralla eikä peräkkäin sellaisena kuin se kuormia.

Oletko valmis tekemään käyttöliittymistäsi intuitiivisempia ja ilmaisuvoimaisempia ottamalla käyttöön runkonäytöt omissa projekteissasi? Näin pääset alkuun.

Suunnittele Web-sivun ulkoasu

Web-sivun asettelun suunnittelu auttaa sinua kiteyttämään odotuksesi. Sinun tulee asettaa tavoitteesi, määrittää asettelu, lisätä tarvittavat sivut ja tehdä siitä helppokäyttöinen ja reagoiva eri näyttökokoille. Harkitse toistaiseksi yksinkertaista mallia, jossa on kansikuva, profiilikuva, vähän tekstiä ja toimintakehotuspainikkeita.

Kun olet laatinut asettelun suunnittelun joko paperilla tai sovelluksella, kuten Figma tai Adobe XD, on aika valmistella HTML-rakenne.

Rakenna perusrakenne

Luo uusi tiedosto index.html ja kirjoita HTML-koodia asettelua varten ylätason sisällä kanssa class=”profiilisäiliö”. Lisätä luokka = "luuranko" jokaiseen elementtiin luurankonäytön lataustehosteen soveltamiseksi. Poistat tämän luokan, kun sisältö ladataan JavaScriptin avulla.

Merkintä: Älä unohda linkittää CSS- ja JavaScript-tiedostoja otsikossasi index.html tiedosto.

John Doe

Ohjelmistoinsinööri @ Google || Full Stack -kehittäjä || Itseoppinut

Bengaluru, Karnataka, Intia • Yhteystiedot


534 yhteyttä






Viesti
Lisää

Aloita sivusi muotoilu

Käytä CSS: n perusattribuutteja, kuten marginaali, font-perhe, ja väri- kaikkialla kehossa.

body {
 marginaali: 0;
 kirjasinperhe: Arial;
 väri: rgba (255, 255, 255, 0,9);
}

Lisää lataustehoste

Voit lisätä lataustehosteen lisäämällä an ::jälkeenpseudoelementti luurankoluokkaan, joka liikkuu vasemmalta (-100 %) oikealle (100 %) sekunnissa tai kahdessa, jolloin tuloksena on hohtava animaatio.

.skeleton {
 asema: suhteellinen;
 leveys: max-sisältö;
 ylivuoto piilotettu;
 reunan säde: 4px;
 taustaväri: #1e2226 !tärkeää;
 väri: läpinäkyvä !tärkeää;
 border-color: #1e2226 !tärkeää;
 käyttäjävalinta: ei mitään;
 kohdistin: oletus;
}
.skeleton img {
 opasiteetti: 0;
}
.skeleton:: jälkeen {
 sijainti: absoluuttinen;
 alkuun: 0;
 oikea: 0;
 pohja: 0;
 vasen: 0;
 muunnos: translateX(-100%);
 taustakuva: lineaarinen-gradient(
 90 astetta,
 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)
 );
 animaatio: shimmer 2s infinite;
 sisältö: '';
}
@keyframes hohtaa {
 100% {
 muunnos: translateX(100%);
 }
}

Tyyli kuvat

Nyt muotoillaan profiilia ja kansikuvaa. Älä unohda asettaa ylivuoto piilotettu; epäjohdonmukaisuuksien välttämiseksi.

img {
 leveys: 100 %;
 pystysuuntaus: keskellä;
}
.profile-container {
 leveys: 95 %;
 suurin leveys: 780 pikseliä;
 marginaali: 0 auto;
 reunan säde: 8px;
 marginaali yläreuna: 32px;
 taustaväri: #1e2226;
 ylivuoto piilotettu;
 asema: suhteellinen;
}
.cover-img {
 leveys: 100 %;
 ylivuoto piilotettu;
 taustaväri: #1e2226;
 kuvasuhde: 4/1;
}
.profile-img {
 rajan säde: 50 %;
 leveys: 160 pikseliä;
 korkeus: 160px;
 reunus: 4px solid #000;
 taustaväri: #1e2226;
 marginaali: 0 auto;
 asema: suhteellinen;
 ylivuoto piilotettu;
 pohja: 100px;
}

Tee siitä reagoiva

Varmista, että suunnittelusi on reagoiva eri näytöillä, käyttämällä mediakyselyjä vastaavasti. Jos olet aloittelija verkkokehityksessä, sinun pitäisi oppia kuinka käyttää mediakyselyitä HTML: ssä ja CSS: ssä koska ne ovat erittäin tärkeitä responsiivisia verkkosivustoja luotaessa.

@media (enimmäisleveys: 560 kuvapistettä) {
 .profile-img {
 leveys: 100px;
 korkeus: 100px;
 pohja: 60px;
 }
}

Muotoile tekstiä

Muotoile tekstiä asettamalla a marginaali, Fonttikoko, ja fontin paino. Voit myös muuttaa tekstin väriä, lisätä otsikon, kappaleen tai ankkurin tagi mieltymystesi mukaan. Hover-tehosteen lisääminen ankkuritunnisteeseen on hyödyllistä, koska se antaa käyttäjälle tiedon linkistä.

.profile-text {
 marginaali yläosa: -80px;
 täyte: 0 16px;
}
.profile-text h1 {
 marginaali-ala: 0;
 fonttikoko: 24px;
 ylivuoto piilotettu;
}
.profile-text p {
 marginaali: 4px 0;
 ylivuoto piilotettu;
}
.profile-text h5 {
 marginaali-yläosa: 4px;
 fonttikoko: 14px;
 marginaali-ala: 8px;
 fontin paino: 400;
 väri: #ffffff99;
 ylivuoto piilotettu;
}
.profile-text a {
 väri: #70b5f9;
 fonttikoko: 14px;
 teksti-koriste: ei mitään;
 fontin paino: 600;
}
.profile-text a: hover {
 väri: #70b5f9;
 tekstin koristelu: alleviivaus;
}

Tyyli CTA

Toimintakehotus (CTA) on tärkeä, koska haluat yleensä muuttaa käyttäjien käynnit jollain tavalla. Kun annat sille helposti havaittavan värin, toimintakehotus erottuu sivulla.

.profile-cta {
 täyte: 16px 16px 32px;
 näyttö: flex;
}
.profile-cta a {
 täyte: 6px 16px;
 reunan säde: 24 kuvapistettä;
 teksti-koriste: ei mitään;
 näyttö: lohko;
}
.message-btn {
 taustaväri: #70b5f9;
 väri: #000;
}
.more-btn {
 väri: peri;
 reunus: 1px kiinteä rgba (255, 255, 255, 0,9);
 marginaali vasen: 8px;
}

Lähtö:

Poista luuston lataustehoste käytöstä JavaScriptin avulla

Nyt kun olet lisännyt johtavan tehosteen CSS: n avulla, on aika poistaa se käytöstä JavaScriptin avulla. Animaatio toistuu oletusarvoisesti äärettömän monta kertaa, mutta haluat sen jatkuvan vain muutaman sekunnin. Voit asettaa ajan 4000 millisekuntiin käyttämällä setTimeout. Se poistaa luurankoluokan kaikista elementeistä 4 sekunnin kuluttua.

Merkintä: Muista lisätä juuri ennen loppua -osio.

const skeletons = document.querySelectorAll('.skeleton')
luurankot.forEach((luuranko-) => {
 setTimeout(() => {
luuranko-.classList.remove('luuranko')
 }, 4000)
})

Lähtö:

Mikä JavaScript on ja miten se toimii?

Olet onnistuneesti luonut luurankonäytön lataustehosteen HTML: n, CSS: n ja JavaScriptin avulla. Nyt, kun joku pyytää uutta sisältöä palvelimelta, voit näyttää luurankonäytön lataustehosteen tietojen latauksen aikana. Siitä on tulossa suositumpi suunnittelutrendi, kuten voit nähdä sivustoilla, kuten Google, Facebook ja Slack.

Jos olet uusi JavaScript-käyttäjä, voit oppia perusasiat ymmärtämällä JavaScriptin ja sen vuorovaikutuksen HTML: n ja CSS: n kanssa.

Mikä on JavaScript ja miten se toimii?

Jos olet oppimassa verkkokehitystä, tässä on mitä sinun tulee tietää JavaScriptistä ja sen toiminnasta HTML: n ja CSS: n kanssa.

Lue Seuraava

Kirjailijasta