Skeleto ekranai yra neatsiejama lankytojų išlaikymo šiuolaikinio dizaino tendencijose dalis. Jie sukuria greičio iliuziją ir valdo vartotojų lūkesčius informuodami juos apie puslapio turinio būseną. Vienas iš svarbiausių, tačiau neįvertintų sprendimų, kuriuos siūlo skeleto ekranai, yra padėti jų išvengti Kaupiamasis išdėstymo poslinkis (CLS), leidžiantis turinį rodyti iš karto, o ne paeiliui. apkrovų.

Pasiruošę savo sąsajas padaryti intuityvesnes ir išraiškingesnes, savo projektuose įdiegę ekranų skeletą? Štai kaip pradėti.

Sukurkite tinklalapio išdėstymą

Tinklalapio maketo kūrimas padeda išsiaiškinti jūsų lūkesčius. Turėtumėte nustatyti savo tikslą, apibrėžti išdėstymą, pridėti visus reikiamus puslapius ir padaryti jį prieinamą bei reaguoti į skirtingus ekrano dydžius. Kol kas apsvarstykite paprastą dizainą su viršelio atvaizdu, profilio vaizdu, trupučiu teksto ir raginimo veikti mygtukais.

Sukūrę maketo dizainą naudodami popierių arba tokią programėlę kaip Figma ar Adobe XD, laikas paruošti HTML struktūrą.

Sukurkite pagrindinę struktūrą

Sukurkite naują failą index.html ir parašyti šiek tiek HTML išdėstymui pirminėje sistemoje su klasė = "profilis-konteineris". Papildyti klasė = "skeletas" kiekvienam elementui, kad būtų pritaikytas skeleto ekrano įkėlimo efektas. Šią klasę pašalinsite, kai turinys bus įkeltas naudojant „JavaScript“.

Pastaba: Nepamirškite susieti CSS ir JavaScript failų savo antraštėje index.html failą.

John Doe

Programinės įrangos inžinierius @ Google || „Full Stack“ kūrėjas || Savamokslis

Bengalūras, Karnataka, Indija • Kontaktinė informacija


534 jungtys






Pranešimas
Daugiau

Pradėkite formuoti savo puslapį

Taikykite pagrindinius CSS atributus, pvz marža, šrifto šeima, ir spalva visame kūne.

kūnas {
 paraštė: 0;
 šriftų šeima: Arial;
 spalva: rgba (255, 255, 255, 0,9);
}

Pridėti įkrovos efektą

Norėdami pridėti įkėlimo efektą, pridėkite an ::popseudoelementas į skeleto klasę, kuri per sekundę ar dvi juda iš kairės (-100 %) į dešinę (100 %), todėl sukuriama mirganti animacija.

.skeleton {
 padėtis: santykinė;
 plotis: maksimalus turinys;
 perteklius paslėptas;
 kraštinės spindulys: 4 pikseliai;
 fono spalva: #1e2226 !svarbu;
 spalva: skaidri !svarbu;
 kraštinės spalva: #1e2226 !svarbu;
 vartotojo pasirinkimas: nėra;
 žymeklis: numatytasis;
}
.skeleton img {
 neskaidrumas: 0;
}
.skeleton:: po {
 padėtis: absoliuti;
 viršuje: 0;
 dešinėje: 0;
 apačioje: 0;
 kairėje: 0;
 transformuoti: translateX(-100%);
 background-image: linear-gradient (
 90 laipsnių,
 rgba (255, 255, 255, 0) 0,
 rgba (255, 255, 255, 0,2) 20 proc.
 rgba (255, 255, 255, 0,5) 60 proc.
 rgba (255, 255, 255, 0)
 );
 animacija: shimmer 2s infinite;
 turinys: '';
}
@keyframes mirgėjimas {
 100% {
 transformuoti: išverstiX(100%);
 }
}

Sukurkite vaizdų stilių

Dabar sukurkime profilio ir viršelio vaizdo stilių. Nepamirškite nustatyti perteklius paslėptas; kad būtų išvengta bet kokių neatitikimų.

img {
 plotis: 100%;
 vertikalus lygiavimas: vidurys;
}
.profile-container {
 plotis: 95%;
 maksimalus plotis: 780 pikselių;
 paraštė: 0 automatinis;
 kraštinės spindulys: 8 pikseliai;
 paraštė viršuje: 32 piks.;
 fono spalva: #1e2226;
 perteklius paslėptas;
 padėtis: santykinė;
}
.cover-img {
 plotis: 100%;
 perteklius paslėptas;
 fono spalva: #1e2226;
 kraštinių santykis: 4/1;
}
.profile-img {
 sienos spindulys: 50%;
 plotis: 160 pikselių;
 aukštis: 160px;
 kraštinė: 4px solid #000;
 fono spalva: #1e2226;
 paraštė: 0 automatinis;
 padėtis: santykinė;
 perteklius paslėptas;
 apačioje: 100 pikselių;
}

Padarykite tai reaguojantį

Norėdami įsitikinti, kad jūsų dizainas reaguoja į skirtingus ekranus, atitinkamai pritaikykite medijos užklausas. Jei esate pradedantysis interneto kūrimo srityje, turėtumėte išmokti kaip naudoti medijos užklausas HTML ir CSS nes jie itin svarbūs kuriant interaktyvias svetaines.

@media (maksimalus plotis: 560 piks.) {
 .profile-img {
 plotis: 100 pikselių;
 aukštis: 100 pikselių;
 apačioje: 60 pikselių;
 }
}

Sukurkite teksto stilių

Sukurkite teksto stilių nustatydami a marža, šrifto dydis, ir šrifto svoris. Taip pat galite pakeisti teksto spalvą, pridėti antraštę, pastraipą ar inkarą pažymėkite pagal savo pageidavimus. Užvedimo efekto pridėjimas prie inkaro žymos yra naudingas, nes jis leidžia vartotojui sužinoti apie nuorodą.

.profile-text {
 paraštė viršuje: -80 pikselių;
 pamušalas: 0 16px;
}
.profile-text h1 {
 paraštė-apačia: 0;
 šrifto dydis: 24 pikseliai;
 perteklius paslėptas;
}
.profile-text p {
 paraštė: 4 pikseliai 0;
 perteklius paslėptas;
}
.profile-text h5 {
 paraštė viršuje: 4 pikseliai;
 šrifto dydis: 14 pikselių;
 paraštė-apačia: 8 pikseliai;
 šrifto svoris: 400;
 spalva: #ffffff99;
 perteklius paslėptas;
}
.profile-text a {
 spalva: #70b5f9;
 šrifto dydis: 14 pikselių;
 tekstas-dekoravimas: nėra;
 šrifto svoris: 600;
}
.profile-text a: hover {
 spalva: #70b5f9;
 tekstas-dekoravimas: pabraukimas;
}

Sukurkite CTA stilių

Raginimas veikti (CTA) yra svarbus, nes paprastai norėsite kaip nors pakeisti savo naudotojų apsilankymus. Jei suteiksite jam lengvai pastebimą spalvą, jūsų raginimas išsiskirti puslapyje.

.profile-cta {
 užpildymas: 16 piks. 16 piks. 32 piks.;
 ekranas: lankstus;
}
.profile-cta a {
 pamušalas: 6px 16px;
 kraštinės spindulys: 24 pikseliai;
 tekstas-dekoravimas: nėra;
 ekranas: blokas;
}
.message-btn {
 fono spalva: #70b5f9;
 spalva: #000;
}
.more-btn {
 spalva: paveldėti;
 kraštinė: 1 piks. vientisas rgba (255, 255, 255, 0,9);
 paraštė kairėje: 8 pikseliai;
}

Išvestis:

Išjunkite skeleto įkėlimo efektą naudodami „JavaScript“.

Dabar, kai pridėjote pagrindinį efektą naudodami CSS, laikas jį išjungti naudojant „JavaScript“. Pagal numatytuosius nustatymus animacija kartosis be galo daug kartų, tačiau norite, kad ji veiktų tik kelias sekundes. Naudodami galite nustatyti laiką iki 4000 milisekundžių setTimeout. Jis pašalins skeleto klasę iš visų elementų po 4 sekundžių.

Pastaba: būtinai pridėkite prieš pat pabaigą skyrius.

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

Išvestis:

Kas yra JavaScript ir kaip jis veikia?

Sėkmingai sukūrėte ekrano įkėlimo efektą naudodami HTML, CSS ir JavaScript. Dabar, kai kas nors prašo naujo turinio iš serverio, galite rodyti skeleto ekrano įkėlimo efektą, kol duomenys įkeliami. Tai tampa vis populiaresnė dizaino tendencija, kaip matote tokiose svetainėse kaip „Google“, „Facebook“ ir „Slack“.

Tuo tarpu, jei nesate naujokas „JavaScript“, galite išmokti pagrindų suprasdami „JavaScript“ ir kaip jis sąveikauja su HTML ir CSS.

Kas yra JavaScript ir kaip jis veikia?

Jei mokotės žiniatinklio kūrimo, štai ką reikia žinoti apie „JavaScript“ ir kaip jis veikia su HTML ir CSS.

Skaitykite toliau

Apie autorių