Skeletskærme er en integreret del af fastholdelse af besøgende i moderne designtrends. De skaber en illusion af hastighed og styrer brugernes forventninger ved at holde dem informeret om status for en sides indhold. En af de mest essentielle, men alligevel undervurderede løsninger, som skeletskærme tilbyder, er deres hjælp til at undgå Cumulative Layout Shift (CLS), der tillader indhold at blive vist på én gang i stedet for sekventielt som det belastninger.

Klar til at gøre dine grænseflader mere intuitive og udtryksfulde ved at implementere skeletskærme i dine egne projekter? Sådan kommer du i gang.

Design websidelayoutet

At designe et websidelayout hjælper dig med at udkrystallisere dine forventninger. Du bør sætte dit mål, definere layoutet, tilføje eventuelle påkrævede sider og gøre det tilgængeligt og responsivt for forskellige skærmstørrelser. Indtil videre kan du overveje et simpelt design med et forsidebillede, profilbillede, lidt tekst og knapper med opfordring til handling.

Når du har udarbejdet et udkast til layoutet, enten ved hjælp af papir eller en app som Figma eller Adobe XD, er det tid til at forberede HTML-strukturen.

Byg den grundlæggende struktur

Opret en ny fil index.html og skriv noget HTML til layoutet inde i en forælder med class="profil-beholder". Tilføje class="skelet" til hvert element for at anvende skeletskærmens indlæsningseffekt. Du fjerner denne klasse, når indholdet indlæses ved hjælp af JavaScript.

Bemærk: Glem ikke at linke CSS- og JavaScript-filerne i headeren på din index.html fil.

John Doe

Softwareingeniør @ Google || Full Stack-udvikler || Selvlært

Bengaluru, Karnataka, Indien • Kontaktoplysninger


534 forbindelser






Besked
Mere

Begynd at style din side

Anvend de grundlæggende CSS-attributter som f.eks margen, skrifttype-familie, og farve over hele kroppen.

krop {
 margin: 0;
 skrifttype-familie: Arial;
 farve: rgba (255, 255, 255, 0,9);
}

Tilføj loading effekt

For at tilføje en indlæsningseffekt skal du tilføje en ::efterpseudo-element til skeletklassen, der bevæger sig fra venstre (-100%) til højre (100%) i løbet af et sekund eller to, hvilket resulterer i en glimtende animation.

.skelet {
 stilling: relativ;
 bredde: max-indhold;
 overløb: skjult;
 kant-radius: 4px;
 baggrundsfarve: #1e2226 !vigtigt;
 farve: gennemsigtig !vigtigt;
 kantfarve: #1e2226 !vigtigt;
 bruger-vælg: ingen;
 markør: standard;
}
.skeleton img {
 opacitet: 0;
}
.skeleton:: efter {
 position: absolut;
 top: 0;
 højre: 0;
 bund: 0;
 venstre: 0;
 transform: translateX(-100%);
 baggrundsbillede: lineæ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 uendelig;
 indhold: '';
}
@keyframes glimmer {
 100% {
 transform: translateX(100%);
 }
}

Style billederne

Lad os nu style profilen og forsidebilledet. Glem ikke at indstille overløb: skjult; for at undgå uoverensstemmelser.

img {
 bredde: 100%;
 vertikal-align: midt;
}
.profile-container {
 bredde: 95%;
 max-bredde: 780px;
 margin: 0 auto;
 kant-radius: 8px;
 margin-top: 32px;
 baggrundsfarve: #1e2226;
 overløb: skjult;
 stilling: relativ;
}
.cover-img {
 bredde: 100%;
 overløb: skjult;
 baggrundsfarve: #1e2226;
 billedformat: 4/1;
}
.profile-img {
 grænse-radius: 50%;
 bredde: 160px;
 højde: 160px;
 kant: 4px fast #000;
 baggrundsfarve: #1e2226;
 margin: 0 auto;
 stilling: relativ;
 overløb: skjult;
 bund: 100px;
}

Gør det responsivt

For at sikre, at dit design er responsivt på forskellige skærme, skal du anvende medieforespørgsler i overensstemmelse hermed. Hvis du er nybegynder til webudvikling, bør du lære det hvordan man bruger medieforespørgsler i HTML og CSS fordi de er super vigtige, når du bygger responsive hjemmesider.

@media (maks. bredde: 560px) {
 .profile-img {
 bredde: 100px;
 højde: 100px;
 bund: 60px;
 }
}

Style teksten

Style teksten ved at indstille a margen, skriftstørrelse, og skrifttype-vægt. Du kan også ændre tekstfarven, tilføje en overskrift, et afsnit eller et anker tag efter dine præferencer. Tilføjelse af en hover-effekt til ankertagget er nyttigt, fordi det lader brugeren vide om et link.

.profile-text {
 margin-top: -80px;
 polstring: 0 16px;
}
.profile-text h1 {
 margin-bund: 0;
 skriftstørrelse: 24px;
 overløb: skjult;
}
.profile-text p {
 margen: 4px 0;
 overløb: skjult;
}
.profile-text h5 {
 margin-top: 4px;
 skriftstørrelse: 14px;
 margin-bund: 8px;
 skrifttype-vægt: 400;
 farve: #ffffff99;
 overløb: skjult;
}
.profile-text a {
 farve: #70b5f9;
 skriftstørrelse: 14px;
 tekst-dekoration: ingen;
 skrifttype-vægt: 600;
}
.profile-text a: hover {
 farve: #70b5f9;
 tekst-dekoration: understregning;
}

Stil CTA'en

En Call to Action (CTA) er vigtig, fordi du generelt vil konvertere dine brugeres besøg på en eller anden måde. At give den en let mærkbar farve vil hjælpe din CTA med at skille sig ud på siden.

.profile-cta {
 polstring: 16px 16px 32px;
 display: flex;
}
.profile-cta a {
 polstring: 6px 16px;
 kant-radius: 24px;
 tekst-dekoration: ingen;
 display: blok;
}
.message-btn {
 baggrundsfarve: #70b5f9;
 farve: #000;
}
.more-btn {
 farve: arve;
 kant: 1px solid rgba (255, 255, 255, 0,9);
 margin-venstre: 8px;
}

Produktion:

Slå Skelet Loading Effect fra ved hjælp af JavaScript

Nu hvor du har tilføjet den førende effekt ved hjælp af CSS, er det tid til at slå den fra ved hjælp af JavaScript. Animationen gentages som standard et uendeligt antal gange, men du ønsker, at den kun skal køre i et par sekunder. Du kan indstille tiden til 4000 millisekunder vha sætTimeout. Det fjerner skeletklassen fra alle elementerne efter 4 sekunder.

Bemærk: Sørg for at tilføje lige før slutningen af afsnit.

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

Produktion:

Hvad er JavaScript, og hvordan virker det?

Du har med succes oprettet en skelet-skærmindlæsningseffekt ved hjælp af HTML, CSS og JavaScript. Nu, når nogen anmoder om nyt indhold fra serveren, kan du vise indlæsningseffekten for skeletskærmen, mens dataene indlæses. Det bliver mere af en populær designtrend, som du kan se det på sider som Google, Facebook og Slack.

I mellemtiden, hvis du er ny til JavaScript, kan du lære det grundlæggende ved at forstå JavaScript, og hvordan det interagerer med HTML og CSS.

Hvad er JavaScript, og hvordan virker det?

Hvis du lærer webudvikling, er her, hvad du behøver at vide om JavaScript, og hvordan det fungerer med HTML og CSS.

Læs Næste

Om forfatteren