Skjelettskjermer er en integrert del av oppbevaring av besøkende i moderne designtrender. De skaper en illusjon av hastighet og styrer brukernes forventninger ved å holde dem informert om statusen til en sides innhold. En av de mest essensielle, men undervurderte løsningene som skjelettskjermer tilbyr, er deres hjelp til å unngå Cumulative Layout Shift (CLS), som lar innhold vises på en gang i stedet for sekvensielt som det laster.

Klar til å gjøre grensesnittene dine mer intuitive og uttrykksfulle ved å implementere skjelettskjermer i dine egne prosjekter? Slik kommer du i gang.

Design nettsideoppsettet

Å designe en nettsidelayout hjelper deg med å krystallisere forventningene dine. Du bør angi målet ditt, definere oppsettet, legge til eventuelle nødvendige sider og gjøre det tilgjengelig og responsivt for forskjellige skjermstørrelser. For nå, vurder et enkelt design med et forsidebilde, profilbilde, litt tekst og handlingsfremmende knapper.

Når du har laget et utkast til layouten, enten ved hjelp av papir eller en app som Figma eller Adobe XD, er det på tide å forberede HTML-strukturen.

Bygg den grunnleggende strukturen

Opprett en ny fil index.html og skriv litt HTML for oppsettet inne i en forelder med class="profil-beholder". Legg til class="skjelett" til hvert element for å bruke skjelettskjermlastningseffekten. Du fjerner denne klassen når innholdet lastes inn med JavaScript.

Merk: Ikke glem å koble til CSS- og JavaScript-filene i overskriften på din index.html fil.

John Doe

Programvareingeniør @ Google || Full Stack-utvikler || Selvlært

Bengaluru, Karnataka, India • Kontaktinfo


534 tilkoblinger






Beskjed
Mer

Begynn å style siden din

Bruk de grunnleggende CSS-attributtene som margin, font-familie, og farge over hele kroppen.

kropp {
 margin: 0;
 font-familie: Arial;
 farge: rgba (255, 255, 255, 0,9);
}

Legg til lasteeffekt

For å legge til en lasteeffekt, legg til en ::etterpseudo-element til skjelettklassen som beveger seg fra venstre (-100 %) til høyre (100 %) over et sekund eller to, noe som resulterer i en glitrende animasjon.

.skeleton {
 stilling: pårørende;
 bredde: maks-innhold;
 overløp: skjult;
 border-radius: 4px;
 bakgrunnsfarge: #1e2226 !viktig;
 farge: gjennomsiktig !viktig;
 kantfarge: #1e2226 !viktig;
 brukervelg: ingen;
 markør: standard;
}
.skeleton img {
 opasitet: 0;
}
.skeleton:: etter {
 posisjon: absolutt;
 topp: 0;
 høyre: 0;
 bunn: 0;
 venstre: 0;
 transform: translateX(-100%);
 bakgrunnsbilde: 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)
 );
 animasjon: shimmer 2s uendelig;
 innhold: '';
}
@keyframes skimmer {
 100% {
 transform: translateX(100%);
 }
}

Stil bildene

La oss nå style profilen og forsidebildet. Ikke glem å stille inn overløp: skjult; for å unngå uoverensstemmelser.

img {
 bredde: 100 %;
 vertikal-juster: midt;
}
.profile-container {
 bredde: 95 %;
 maks-bredde: 780px;
 margin: 0 auto;
 border-radius: 8px;
 marg-top: 32px;
 bakgrunnsfarge: #1e2226;
 overløp: skjult;
 stilling: pårørende;
}
.cover-img {
 bredde: 100 %;
 overløp: skjult;
 bakgrunnsfarge: #1e2226;
 sideforhold: 4/1;
}
.profile-img {
 kantradius: 50 %;
 bredde: 160px;
 høyde: 160px;
 kantlinje: 4px solid #000;
 bakgrunnsfarge: #1e2226;
 margin: 0 auto;
 stilling: pårørende;
 overløp: skjult;
 bunn: 100px;
}

Gjør det responsivt

For å sikre at designet ditt er responsivt på forskjellige skjermer, bruk mediespørringer deretter. Hvis du er en nybegynner innen webutvikling, bør du lære det hvordan du bruker mediespørringer i HTML og CSS fordi de er superviktige når du bygger responsive nettsteder.

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

Stil teksten

Stil teksten ved å sette a margin, skriftstørrelse, og font-vekt. Du kan også endre tekstfargen, legge til en overskrift, avsnitt eller anker tag i henhold til dine preferanser. Det er nyttig å legge til en hover-effekt i anker-taggen fordi den lar brukeren få vite om en kobling.

.profile-text {
 margin-top: -80px;
 polstring: 0 16px;
}
.profile-text h1 {
 marg-bunn: 0;
 skriftstørrelse: 24px;
 overløp: skjult;
}
.profile-text p {
 margin: 4px 0;
 overløp: skjult;
}
.profile-text h5 {
 marg-top: 4px;
 skriftstørrelse: 14px;
 marg-bunn: 8px;
 font-vekt: 400;
 farge: #ffffff99;
 overløp: skjult;
}
.profile-text a {
 farge: #70b5f9;
 skriftstørrelse: 14px;
 tekst-dekor: ingen;
 font-vekt: 600;
}
.profile-text a: hover {
 farge: #70b5f9;
 tekst-dekorasjon: understreking;
}

Stil CTA

En oppfordring til handling (CTA) er viktig fordi du vanligvis ønsker å konvertere brukernes besøk på en eller annen måte. Å gi den en lett merkbar farge vil hjelpe din CTA å skille seg ut på siden.

.profile-cta {
 polstring: 16px 16px 32px;
 display: flex;
}
.profile-cta a {
 polstring: 6px 16px;
 kantradius: 24px;
 tekst-dekor: ingen;
 display: blokk;
}
.message-btn {
 bakgrunnsfarge: #70b5f9;
 farge: #000;
}
.more-btn {
 farge: arve;
 kantlinje: 1px solid rgba (255, 255, 255, 0,9);
 marg-venstre: 8px;
}

Produksjon:

Slå av skjelettinnlastingseffekt ved å bruke JavaScript

Nå som du har lagt til den ledende effekten ved hjelp av CSS, er det på tide å slå den av med JavaScript. Animasjonen vil gjentas et uendelig antall ganger som standard, men du vil at den bare skal kjøre i noen få sekunder. Du kan stille inn tiden til 4000 millisekunder ved å bruke setTimeout. Den vil fjerne skjelettklassen fra alle elementene etter 4 sekunder.

Merk: Sørg for å legge til rett før slutten av seksjon.

const skjeletter = document.querySelectorAll('.skeleton')
skjeletter.forHver((skjelett) => {
 setTimeout(() => {
skjelett.classList.remove('skeleton')
 }, 4000)
})

Produksjon:

Hva er JavaScript og hvordan fungerer det?

Du har opprettet en skjelettskjermlastningseffekt ved hjelp av HTML, CSS og JavaScript. Nå, når noen ber om nytt innhold fra serveren, kan du vise innlastingseffekten for skjelettskjermen mens dataene lastes. Det blir mer av en populær designtrend, slik du kan se det på nettsteder som Google, Facebook og Slack.

I mellomtiden, hvis du er ny på JavaScript, kan du lære det grunnleggende ved å forstå JavaScript og hvordan det samhandler med HTML og CSS.

Hva er JavaScript og hvordan fungerer det?

Hvis du lærer webutvikling, er det her det du trenger å vite om JavaScript og hvordan det fungerer med HTML og CSS.

Les Neste

Om forfatteren