Skeletové zástěny jsou v moderních designových trendech nedílnou součástí udržení návštěvníků. Vytvářejí iluzi rychlosti a řídí očekávání uživatelů tím, že je informují o stavu obsahu stránky. Jedním z nejzásadnějších, ale podceňovaných řešení, které skeletové obrazovky nabízejí, je jejich pomoc při vyhýbání se Cumulative Layout Shift (CLS), který umožňuje zobrazení celého obsahu najednou, nikoli postupně. zatížení.

Jste připraveni učinit svá rozhraní intuitivnější a výraznější implementací základních obrazovek do svých vlastních projektů? Zde je návod, jak začít.

Navrhněte rozvržení webové stránky

Návrh rozvržení webové stránky vám pomůže krystalizovat vaše očekávání. Měli byste nastavit svůj cíl, definovat rozvržení, přidat jakékoli požadované stránky a zpřístupnit je a reagovat na různé velikosti obrazovek. Prozatím zvažte jednoduchý design s titulním obrázkem, profilovým obrázkem, malým textem a tlačítky s výzvou k akci.

Jakmile vytvoříte návrh rozvržení, ať už pomocí papíru nebo aplikace jako Figma nebo Adobe XD, je čas připravit strukturu HTML.

Sestavte základní strukturu

Vytvořte nový soubor index.html a napsat nějaké HTML pro rozvržení uvnitř rodiče s class="profile-container". Přidat class=”kostra” na každý prvek, aby se použil efekt zatížení obrazovky kostry. Když se obsah načte pomocí JavaScriptu, tuto třídu odstraníte.

Poznámka: Nezapomeňte propojit soubory CSS a JavaScript v záhlaví vašeho index.html soubor.

John Doe

Softwarový inženýr @ Google || Full Stack Developer || Samouk

Bengaluru, Karnataka, Indie • Kontaktní informace


534 spojení






Zpráva
Více

Začněte upravovat styl stránky

Použijte základní atributy CSS jako okraj, rodina písem, a barva po celém těle.

tělo {
 okraj: 0;
 rodina písem: Arial;
 barva: rgba (255, 255, 255, 0,9);
}

Přidat efekt načítání

Chcete-li přidat efekt načítání, přidejte ::popseudoprvek na třídu kostry, která se během sekundy nebo dvou přesune zleva (-100 %) doprava (100 %), což vede k třpytivé animaci.

.skeleton {
 poloha: relativní;
 šířka: max-obsah;
 přepad: skrytý;
 border-radius: 4px;
 barva pozadí: #1e2226 !důležité;
 barva: transparentní !důležité;
 border-color: #1e2226 !důležité;
 user-select: none;
 kurzor: výchozí;
}
.skeleton img {
 neprůhlednost: 0;
}
.skeleton:: po {
 pozice: absolutní;
 nahoře: 0;
 vpravo: 0;
 dole: 0;
 vlevo: 0;
 transformace: translateX(-100%);
 background-image: linear-gradient(
 90 stupňů,
 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)
 );
 animace: shimmer 2s infinite;
 obsah: '';
}
@klíčové snímky lesk {
 100% {
 transformovat: translateX(100%);
 }
}

Upravte styl obrázků

Nyní upravíme styl profilu a titulního obrázku. Nezapomeňte nastavit přepad: skrytý; aby se předešlo případným nesrovnalostem.

img {
 šířka: 100 %;
 vertikální zarovnat: střed;
}
.profile-container {
 šířka: 95 %;
 max-width: 780px;
 okraj: 0 auto;
 border-radius: 8px;
 margin-top: 32px;
 barva pozadí: #1e2226;
 přepad: skrytý;
 poloha: relativní;
}
.cover-img {
 šířka: 100 %;
 přepad: skrytý;
 barva pozadí: #1e2226;
 poměr stran: 4/1;
}
.profile-img {
 hraniční rádius: 50 %;
 šířka: 160px;
 výška: 160px;
 ohraničení: 4px plné #000;
 barva pozadí: #1e2226;
 okraj: 0 auto;
 poloha: relativní;
 přepad: skrytý;
 dole: 100px;
}

Udělejte to responzivní

Abyste se ujistili, že váš návrh bude reagovat na různých obrazovkách, aplikujte odpovídajícím způsobem dotazy na média. Pokud jste ve vývoji webu začátečník, měli byste se to naučit jak používat mediální dotazy v HTML a CSS protože jsou velmi důležité při vytváření responzivních webů.

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

Upravte styl textu

Upravte styl textu nastavením a okraj, velikost písma, a tloušťka písma. Můžete také změnit barvu textu, přidat nadpis, odstavec nebo kotvu tag podle vašich preferencí. Přidání efektu najetí na značku ukotvení je užitečné, protože dává uživateli vědět o odkazu.

.profile-text {
 margin-top: -80px;
 odsazení: 0 16px;
}
.profile-text h1 {
 okraj-dolní: 0;
 velikost písma: 24px;
 přepad: skrytý;
}
.profile-text p {
 okraj: 4px 0;
 přepad: skrytý;
}
.profile-text h5 {
 margin-top: 4px;
 velikost písma: 14px;
 margin-bottom: 8px;
 váha písma: 400;
 barva: #ffffff99;
 přepad: skrytý;
}
.profile-text a {
 barva: #70b5f9;
 velikost písma: 14px;
 text-dekorace: žádná;
 váha písma: 600;
}
.profile-text a: hover {
 barva: #70b5f9;
 text-dekorace: podtržení;
}

Upravte CTA

Výzva k akci (CTA) je důležitá, protože obecně budete chtít návštěvy svých uživatelů nějakým způsobem převést. Pokud tomu dáte snadno viditelnou barvu, vaše CTA na stránce vynikne.

.profile-cta {
 odsazení: 16px 16px 32px;
 displej: flex;
}
.profile-cta a {
 výplň: 6px 16px;
 border-radius: 24px;
 text-dekorace: žádná;
 displej: blok;
}
.message-btn {
 barva pozadí: #70b5f9;
 barva: #000;
}
.more-btn {
 barva: zdědit;
 ohraničení: 1px solid rgba (255, 255, 255, 0,9);
 margin-left: 8px;
}

Výstup:

Vypněte efekt načítání kostry pomocí JavaScriptu

Nyní, když jste přidali hlavní efekt pomocí CSS, je čas jej vypnout pomocí JavaScriptu. Ve výchozím nastavení se animace bude opakovat nekonečněkrát, ale chcete, aby běžela jen několik sekund. Pomocí můžete nastavit čas na 4000 milisekund setTimeout. Po 4 sekundách odebere třídu kostry ze všech prvků.

Poznámka: Nezapomeňte přidat těsně před koncem sekce.

const skeletons = document.querySelectorAll('.skeleton')
kostry.pro každého((kostra) => {
 setTimeout(() => {
kostra.classList.remove('kostra')
 }, 4000)
})

Výstup:

Co je JavaScript a jak funguje?

Úspěšně jste vytvořili efekt načítání obrazovky pomocí HTML, CSS a JavaScriptu. Nyní, kdykoli si někdo ze serveru vyžádá nový obsah, můžete během načítání dat zobrazit efekt načítání obrazovky. Stává se stále více oblíbeným designovým trendem, jak jej můžete vidět na stránkách jako Google, Facebook a Slack.

Mezitím, pokud s JavaScriptem začínáte, můžete se naučit základy tím, že porozumíte JavaScriptu a jeho interakci s HTML a CSS.

Co je JavaScript a jak funguje?

Pokud se učíte vývoj webových aplikací, zde je to, co potřebujete vědět o JavaScriptu a o tom, jak funguje s HTML a CSS.

Přečtěte si další

O autorovi