Skelettskärmar är en integrerad del av besöksbevarandet i moderna designtrender. De skapar en illusion av hastighet och hanterar användarnas förväntningar genom att hålla dem informerade om statusen för en sidas innehåll. En av de mest väsentliga men underskattade lösningarna som skelettskärmar erbjuder är deras hjälp att undvika Cumulative Layout Shift (CLS), vilket gör att innehåll kan visas på en gång snarare än sekventiellt som det massor.

Är du redo att göra dina gränssnitt mer intuitiva och uttrycksfulla genom att implementera skelettskärmar i dina egna projekt? Så här kommer du igång.

Designa webbsidans layout

Att designa en webbsidalayout hjälper dig att kristallisera dina förväntningar. Du bör sätta ditt mål, definiera layouten, lägga till eventuella sidor som krävs och göra den tillgänglig och responsiv för olika skärmstorlekar. För nu, överväg en enkel design med en omslagsbild, profilbild, lite text och uppmaningsknappar.

När du har ritat utformningen av layouten, antingen med papper eller en app som Figma eller Adobe XD, är det dags att förbereda HTML-strukturen.

Bygg den grundläggande strukturen

Skapa en ny fil index.html och skriv lite HTML för layouten i en förälder med class="profile-container". Lägg till class="skelett" till varje element för att applicera skelettskärmsladdningseffekten. Du kommer att ta bort den här klassen när innehållet laddas med JavaScript.

Notera: Glöm inte att länka CSS- och JavaScript-filerna i rubriken på din index.html fil.

John Doe

Programvaruingenjör @ Google || Full Stack-utvecklare || Självlärd

Bengaluru, Karnataka, Indien • Kontaktinformation


534 anslutningar






Meddelande
Mer

Börja styla din sida

Använd de grundläggande CSS-attributen som marginal, typsnittsfamilj, och Färg över hela kroppen.

kropp {
 marginal: 0;
 font-family: Arial;
 färg: rgba (255, 255, 255, 0,9);
}

Lägg till laddningseffekt

För att lägga till en laddningseffekt, lägg till en ::efterpseudoelement till skelettklassen som rör sig från vänster (-100 %) till höger (100 %) över en sekund eller två, vilket resulterar i en skimrande animering.

.skeleton {
 position: relativ;
 bredd: max-innehåll;
 overflow: gömd;
 border-radie: 4px;
 bakgrundsfärg: #1e2226 !viktigt;
 färg: transparent !viktigt;
 kantfärg: #1e2226 !viktigt;
 användarval: ingen;
 markör: standard;
}
.skeleton img {
 opacitet: 0;
}
.skeleton:: efter {
 position: absolut;
 topp: 0;
 höger: 0;
 botten: 0;
 vänster: 0;
 transform: translateX(-100%);
 bakgrundsbild: linjär-gradient(
 90 grader,
 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)
 );
 animation: shimmer 2s oändlig;
 innehåll: '';
}
@nyckelrutor skimmer {
 100% {
 transform: translateX(100%);
 }
}

Style bilderna

Låt oss nu styla profilen och omslagsbilden. Glöm inte att ställa in overflow: gömd; för att undvika inkonsekvenser.

img {
 bredd: 100%;
 vertikal-align: mitten;
}
.profile-container {
 bredd: 95%;
 max-bredd: 780px;
 marginal: 0 auto;
 border-radie: 8px;
 margin-top: 32px;
 bakgrundsfärg: #1e2226;
 overflow: gömd;
 position: relativ;
}
.cover-img {
 bredd: 100%;
 overflow: gömd;
 bakgrundsfärg: #1e2226;
 bildförhållande: 4/1;
}
.profile-img {
 gränsradie: 50%;
 bredd: 160px;
 höjd: 160px;
 kantlinje: 4px fast #000;
 bakgrundsfärg: #1e2226;
 marginal: 0 auto;
 position: relativ;
 overflow: gömd;
 botten: 100px;
}

Gör det responsivt

För att se till att din design är responsiv på olika skärmar, använd mediefrågor i enlighet med detta. Om du är nybörjare inom webbutveckling bör du lära dig hur man använder mediafrågor i HTML och CSS eftersom de är superviktiga när du bygger responsiva webbplatser.

@media (maxbredd: 560px) {
 .profile-img {
 bredd: 100px;
 höjd: 100px;
 botten: 60px;
 }
}

Style texten

Style texten genom att ställa in a marginal, textstorlek, och teckensnittsvikt. Du kan också ändra textfärgen, lägga till en rubrik, ett stycke eller ett ankare tagga enligt dina preferenser. Att lägga till en svävningseffekt till ankartaggen är användbart eftersom det låter användaren veta om en länk.

.profile-text {
 margin-top: -80px;
 stoppning: 0 16px;
}
.profile-text h1 {
 marginal-botten: 0;
 teckenstorlek: 24px;
 overflow: gömd;
}
.profile-text p {
 marginal: 4px 0;
 overflow: gömd;
}
.profile-text h5 {
 margin-top: 4px;
 teckenstorlek: 14px;
 margin-bottom: 8px;
 teckensnittsvikt: 400;
 färg: #ffffff99;
 overflow: gömd;
}
.profile-text a {
 färg: #70b5f9;
 teckenstorlek: 14px;
 text-dekoration: ingen;
 teckensnittsvikt: 600;
}
.profile-text a: hover {
 färg: #70b5f9;
 text-dekoration: understryka;
}

Style CTA

En uppmaning till handling (CTA) är viktig eftersom du i allmänhet vill konvertera dina användares besök på något sätt. Genom att ge den en lätt märkbar färg kommer din CTA att sticka ut på sidan.

.profile-cta {
 stoppning: 16px 16px 32px;
 display: flex;
}
.profile-cta a {
 stoppning: 6px 16px;
 kantradie: 24px;
 text-dekoration: ingen;
 display: block;
}
.message-btn {
 bakgrundsfärg: #70b5f9;
 färg: #000;
}
.more-btn {
 färg: ärva;
 kant: 1px fast rgba (255, 255, 255, 0,9);
 marginal-vänster: 8px;
}

Produktion:

Stäng av skelettladdningseffekt med JavaScript

Nu när du har lagt till den ledande effekten med CSS är det dags att stänga av det med JavaScript. Animeringen kommer att upprepas ett oändligt antal gånger som standard, men du vill att den bara ska köras i några sekunder. Du kan ställa in tiden till 4000 millisekunder med setTimeout. Det tar bort skelettklassen från alla element efter 4 sekunder.

Notera: Se till att lägga till strax före slutet av sektion.

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

Produktion:

Vad är JavaScript och hur fungerar det?

Du har framgångsrikt skapat en skelettskärmsladdningseffekt med HTML, CSS och JavaScript. Nu, när någon begär nytt innehåll från servern, kan du visa skelettskärmens laddningseffekt medan data laddas. Det blir mer av en populär designtrend, eftersom du kan se det på sajter som Google, Facebook och Slack.

Under tiden, om du är ny på JavaScript, kan du lära dig grunderna genom att förstå JavaScript och hur det interagerar med HTML och CSS.

Vad är JavaScript och hur fungerar det?

Om du lär dig webbutveckling, här är vad du behöver veta om JavaScript och hur det fungerar med HTML och CSS.

Läs Nästa

Om författaren