Skeletové paravány sú v moderných dizajnových trendoch neoddeliteľnou súčasťou udržania návštevníkov. Vytvárajú ilúziu rýchlosti a riadia očakávania používateľov tým, že ich informujú o stave obsahu stránky. Jedným z najdôležitejších, ale podceňovaných riešení, ktoré skeletové obrazovky ponúkajú, je ich pomoc pri vyhýbaní sa Kumulatívna zmena rozloženia (CLS), ktorá umožňuje zobraziť obsah naraz a nie postupne. zaťaženie.

Ste pripravení urobiť svoje rozhrania intuitívnejšími a výraznejšími implementáciou základných obrazoviek do svojich vlastných projektov? Tu je návod, ako začať.

Navrhnite rozloženie webovej stránky

Návrh rozloženia webovej stránky vám pomôže vykryštalizovať vaše očakávania. Mali by ste si nastaviť cieľ, definovať rozloženie, pridať všetky požadované stránky a sprístupniť ho a reagovať na rôzne veľkosti obrazoviek. Zatiaľ pouvažujte nad jednoduchým dizajnom s titulným obrázkom, profilovým obrázkom, malým textom a tlačidlami s výzvou na akciu.

Po vytvorení návrhu rozloženia pomocou papiera alebo aplikácie ako Figma alebo Adobe XD je čas pripraviť štruktúru HTML.

Vytvorte základnú štruktúru

Vytvorte nový súbor index.html a napíšte nejaké HTML pre rozloženie vnútri rodiča s class=”profilový kontajner”. Pridať class=”kostra” na každý prvok, aby sa použil efekt načítania obrazovky kostry. Keď sa obsah načíta pomocou JavaScriptu, túto triedu odstránite.

Poznámka: Nezabudnite prepojiť súbory CSS a JavaScript v hlavičke svojho index.html súbor.

John Doe

Softvérový inžinier @ Google || Full Stack Developer || Samouk

Bengaluru, Karnataka, India • Kontaktné informácie


534 spojení






Správa
Viac

Začnite upravovať štýl svojej stránky

Použite základné atribúty CSS ako marža, font-familya farba po celom tele.

telo {
 okraj: 0;
 rodina písiem: Arial;
 farba: rgba (255, 255, 255, 0,9);
}

Pridajte efekt načítania

Ak chcete pridať efekt načítania, pridajte ::popseudoprvok na triedu kostry, ktorá sa o sekundu alebo dve presunie zľava (-100 %) doprava (100 %), výsledkom čoho je trblietavá animácia.

.skeleton {
 poloha: relatívna;
 šírka: max-obsah;
 prepad: skrytý;
 border-radius: 4px;
 farba pozadia: #1e2226 !dôležité;
 farba: transparentná !dôležité;
 border-color: #1e2226 !dôležité;
 user-select: none;
 kurzor: predvolený;
}
.skeleton img {
 nepriehľadnosť: 0;
}
.skeleton:: po {
 pozícia: absolútna;
 hore: 0;
 vpravo: 0;
 spodná časť: 0;
 vľavo: 0;
 transformácia: translateX(-100%);
 background-image: linear-gradient(
 90 stupňov,
 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)
 );
 animácia: trblietanie 2s nekonečné;
 obsah: '';
}
@kľúčové snímky trblietať sa {
 100% {
 transformovať: translateX(100%);
 }
}

Upravte štýl obrázkov

Teraz upravme štýl profilu a titulného obrázka. Nezabudnite nastaviť prepad: skrytý; aby sa predišlo prípadným nezrovnalostiam.

img {
 šírka: 100 %;
 vertikálne zarovnať: stred;
}
.profile-container {
 šírka: 95 %;
 max-width: 780px;
 okraj: 0 auto;
 border-radius: 8px;
 margin-top: 32px;
 farba pozadia: #1e2226;
 prepad: skrytý;
 poloha: relatívna;
}
.cover-img {
 šírka: 100 %;
 prepad: skrytý;
 farba pozadia: #1e2226;
 pomer strán: 4/1;
}
.profile-img {
 hraničný polomer: 50 %;
 šírka: 160px;
 výška: 160px;
 orámovanie: 4px plné #000;
 farba pozadia: #1e2226;
 okraj: 0 auto;
 poloha: relatívna;
 prepad: skrytý;
 dole: 100px;
}

Urobte to responzívne

Aby ste sa uistili, že váš dizajn reaguje na rôznych obrazovkách, aplikujte podľa toho dopyty na médiá. Ak ste začiatočník vo vývoji webu, mali by ste sa to naučiť ako používať mediálne dotazy v HTML a CSS pretože sú mimoriadne dôležité pri vytváraní responzívnych webových stránok.

@media (max-width: 560px) {
 .profile-img {
 šírka: 100px;
 výška: 100px;
 dole: 60px;
 }
}

Upravte štýl textu

Upravte štýl textu nastavením a marža, veľkosť písmaa font-weight. Môžete tiež zmeniť farbu textu, pridať nadpis, odsek alebo kotvu tag podľa vašich preferencií. Pridanie efektu prechodu k značke ukotvenia je užitočné, pretože dáva používateľovi vedieť o odkaze.

.profile-text {
 margin-top: -80px;
 padding: 0 16px;
}
.profile-text h1 {
 okraj-dole: 0;
 veľkosť písma: 24px;
 prepad: skrytý;
}
.profile-text p {
 okraj: 4px 0;
 prepad: skrytý;
}
.profile-text h5 {
 margin-top: 4px;
 veľkosť písma: 14px;
 margin-bottom: 8px;
 váha písma: 400;
 farba: #ffffff99;
 prepad: skrytý;
}
.profile-text a {
 farba: #70b5f9;
 veľkosť písma: 14px;
 text-dekorácia: žiadna;
 váha písma: 600;
}
.profile-text a: hover {
 farba: #70b5f9;
 text-dekorácia: podčiarknutie;
}

Štýl CTA

Výzva na akciu (CTA) je dôležitá, pretože vo všeobecnosti budete chcieť nejakým spôsobom konvertovať návštevy vašich používateľov. Ak tomu dáte ľahko viditeľnú farbu, vaša CTA na stránke vynikne.

.profile-cta {
 padding: 16px 16px 32px;
 displej: flex;
}
.profile-cta a {
 výplň: 6px 16px;
 border-radius: 24px;
 text-dekorácia: žiadna;
 displej: blok;
}
.message-btn {
 farba pozadia: #70b5f9;
 farba: #000;
}
.more-btn {
 farba: zdediť;
 okraj: 1px plný rgba (255, 255, 255, 0,9);
 ľavý okraj: 8px;
}

Výkon:

Vypnite efekt načítania kostry pomocou JavaScriptu

Teraz, keď ste pridali hlavný efekt pomocou CSS, je čas ho vypnúť pomocou JavaScriptu. Animácia sa bude v predvolenom nastavení opakovať nekonečne veľakrát, ale chcete, aby bežala len niekoľko sekúnd. Pomocou môžete nastaviť čas na 4000 milisekúnd setTimeout. Po 4 sekundách odstráni triedu kostry zo všetkých prvkov.

Poznámka: Nezabudnite pridať tesne pred koncom oddiele.

const skeletons = document.querySelectorAll('.skeleton')
kostry.pre kazdeho((kostra) => {
 setTimeout(() => {
kostra.classList.remove('kostra')
 }, 4000)
})

Výkon:

Čo je JavaScript a ako funguje?

Úspešne ste vytvorili efekt načítania kostry obrazovky pomocou HTML, CSS a JavaScriptu. Teraz, kedykoľvek si niekto vyžiada nový obsah zo servera, môžete počas načítania údajov zobraziť efekt načítania obrazovky. Stáva sa čoraz populárnejším dizajnovým trendom, ako ho môžete vidieť na stránkach ako Google, Facebook a Slack.

Medzitým, ak ste v JavaScripte noví, môžete sa naučiť základy porozumením JavaScriptu a jeho interakcii s HTML a CSS.

Čo je JavaScript a ako funguje?

Ak sa učíte vývoj webových aplikácií, tu je to, čo potrebujete vedieť o JavaScripte a o tom, ako funguje s HTML a CSS.

Prečítajte si ďalej

O autorovi