Skeletschermen zijn een integraal onderdeel van bezoekersretentie in moderne designtrends. Ze creëren een illusie van snelheid en beheren de verwachtingen van de gebruikers door hen op de hoogte te houden van de status van de inhoud van een pagina. Een van de meest essentiële maar onderschatte oplossingen die skeletschermen bieden, is hun hulp bij het vermijden van Cumulatieve lay-outverschuiving (CLS), waardoor inhoud in één keer kan worden weergegeven in plaats van opeenvolgend zoals het is ladingen.

Klaar om uw interfaces intuïtiever en expressiever te maken door skeletschermen in uw eigen projecten te implementeren? Hier leest u hoe u aan de slag kunt gaan.

Ontwerp de webpagina-indeling

Het ontwerpen van een webpagina-indeling helpt u uw verwachtingen te kristalliseren. U moet uw doel bepalen, de lay-out definiëren, de vereiste pagina's toevoegen en deze toegankelijk en responsief maken voor verschillende schermformaten. Overweeg nu een eenvoudig ontwerp met een omslagafbeelding, profielafbeelding, een beetje tekst en call-to-action-knoppen.

Nadat u het ontwerp van de lay-out hebt opgesteld, met papier of een app zoals Figma of Adobe XD, is het tijd om de HTML-structuur voor te bereiden.

Bouw de basisstructuur

Een nieuw bestand maken index.html en schrijf wat HTML voor de lay-out in een ouder met class="profielcontainer". Toevoegen class = "skelet" op elk element om het effect van het laden van het skeletscherm toe te passen. U verwijdert deze klasse wanneer de inhoud wordt geladen met JavaScript.

Opmerking: Vergeet niet de CSS- en JavaScript-bestanden te linken in de header van uw index.html het dossier.

John Doe

Software Engineer @ Google || Full Stack-ontwikkelaar || Zelf geleerd

Bengaluru, Karnataka, India • Contact informatie


534 verbindingen






Bericht
Meer

Begin met het stylen van je pagina

Pas de basis-CSS-kenmerken toe, zoals marge, font-familie, en kleur over het hele lichaam.

lichaam {
 marge: 0;
 font-familie: Arial;
 kleur: rgba (255, 255, 255, 0,9);
}

Laadeffect toevoegen

Voeg een. toe om een ​​laadeffect toe te voegen ::napseudo-element naar de skeletklasse die over een seconde of twee van links (-100%) naar rechts (100%) beweegt, wat resulteert in een glinsterende animatie.

.skelet {
 positie: relatief;
 breedte: max-inhoud;
 overloop verborgen;
 grens-radius: 4px;
 achtergrondkleur: #1e2226 !belangrijk;
 kleur: transparant !belangrijk;
 border-kleur: #1e2226 !belangrijk;
 gebruiker selecteren: geen;
 cursor: standaard;
}
.skelet img {
 dekking: 0;
}
.skelet:: na {
 positie: absoluut;
 boven: 0;
 rechts: 0;
 onder: 0;
 links: 0;
 transformeren: translateX(-100%);
 achtergrondafbeelding: lineair verloop(
 90 graden,
 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)
 );
 animatie: shimmer 2s oneindig;
 inhoud: '';
}
@keyframes flikkering {
 100% {
 transformeren: translateX(100%);
 }
}

Stijl de afbeeldingen

Laten we nu het profiel en de omslagafbeelding stylen. Vergeet niet in te stellen overloop verborgen; om eventuele inconsistenties te voorkomen.

img {
 breedte: 100%;
 verticaal uitlijnen: midden;
}
.profielcontainer {
 breedte: 95%;
 maximale breedte: 780px;
 marge: 0 automatisch;
 grensradius: 8px;
 marge-top: 32px;
 achtergrondkleur: #1e2226;
 overloop verborgen;
 positie: relatief;
}
.cover-img {
 breedte: 100%;
 overloop verborgen;
 achtergrondkleur: #1e2226;
 beeldverhouding: 4 / 1;
}
.profiel-img {
 grensradius: 50%;
 breedte: 160px;
 hoogte: 160px;
 rand: 4px effen #000;
 achtergrondkleur: #1e2226;
 marge: 0 automatisch;
 positie: relatief;
 overloop verborgen;
 onder: 100px;
}

Maak het responsief

Pas mediaquery's dienovereenkomstig toe om ervoor te zorgen dat uw ontwerp op verschillende schermen reageert. Als je een beginner bent in webontwikkeling, zou je dit moeten leren hoe mediaquery's te gebruiken in HTML en CSS omdat ze super belangrijk zijn bij het bouwen van responsieve websites.

@media (max-breedte: 560px) {
 .profiel-img {
 breedte: 100px;
 hoogte: 100px;
 onder: 60px;
 }
}

Stijl de tekst

Stijl de tekst door a. in te stellen marge, lettertypegrootte, en lettertype dikte. U kunt ook de tekstkleur wijzigen, een kop, alinea of ​​anker toevoegen tag volgens uw voorkeuren. Het toevoegen van een zweefeffect aan de ankertag is handig omdat het de gebruiker op de hoogte stelt van een link.

.profiel-tekst {
 marge-top: -80px;
 opvulling: 0 16px;
}
.profiel-tekst h1 {
 marge-onder: 0;
 lettergrootte: 24px;
 overloop verborgen;
}
.profiel-tekst p {
 marge: 4px 0;
 overloop verborgen;
}
.profiel-tekst h5 {
 marge-top: 4px;
 lettergrootte: 14px;
 marge-onder: 8px;
 lettergewicht: 400;
 kleur: #ffffff99;
 overloop verborgen;
}
.profiel-tekst een {
 kleur: #70b5f9;
 lettergrootte: 14px;
 tekstdecoratie: geen;
 lettergewicht: 600;
}
.profile-text a: hover {
 kleur: #70b5f9;
 tekstdecoratie: onderstrepen;
}

Stijl de CTA

Een call-to-action (CTA) is belangrijk omdat u over het algemeen de bezoeken van uw gebruikers op de een of andere manier wilt converteren. Door het een gemakkelijk waarneembare kleur te geven, zal uw CTA opvallen op de pagina.

.profiel-cta {
 opvulling: 16px 16px 32px;
 weergave: flexibel;
}
.profile-cta een {
 opvulling: 6px 16px;
 grensradius: 24px;
 tekstdecoratie: geen;
 weergave: blok;
}
.bericht-btn {
 achtergrondkleur: #70b5f9;
 kleur: #000;
}
.meer-btn {
 kleur: erven;
 rand: 1px solide rgba (255, 255, 255, 0.9);
 marge-links: 8px;
}

Uitgang::

Schakel het laadeffect van het skelet uit met JavaScript

Nu je het leidende effect hebt toegevoegd met CSS, is het tijd om het uit te schakelen met JavaScript. De animatie wordt standaard een oneindig aantal keren herhaald, maar u wilt dat deze maar een paar seconden wordt uitgevoerd. U kunt de tijd instellen op 4000 milliseconden met setTime-out. Het verwijdert de skeletklasse van alle elementen na 4 seconden.

Opmerking: Zorg ervoor dat u toevoegt net voor het einde van de sectie.

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

Uitgang::

Wat is JavaScript en hoe werkt het?

U hebt met succes een skeleteffect voor het laden van het scherm gecreëerd met HTML, CSS en JavaScript. Nu, wanneer iemand nieuwe inhoud van de server aanvraagt, kunt u het laadeffect van het skeletscherm weergeven terwijl de gegevens worden geladen. Het wordt steeds meer een populaire ontwerptrend, zoals je kunt zien op sites als Google, Facebook en Slack.

Als JavaScript nieuw voor u is, kunt u de basis leren door JavaScript te begrijpen en te begrijpen hoe het samenwerkt met HTML en CSS.

Wat is JavaScript en hoe werkt het?

Als u webontwikkeling leert, volgt hier wat u moet weten over JavaScript en hoe het werkt met HTML en CSS.

Lees volgende

Over de auteur