Skelettbildschirme sind ein wesentlicher Bestandteil der Besucherbindung in modernen Designtrends. Sie erzeugen eine Illusion von Geschwindigkeit und steuern die Erwartungen der Benutzer, indem sie sie über den Status des Inhalts einer Seite auf dem Laufenden halten. Eine der wichtigsten, aber unterschätzten Lösungen, die Skeleton-Bildschirme bieten, ist ihre Hilfe bei der Vermeidung von Cumulative Layout Shift (CLS), sodass Inhalte alle auf einmal und nicht nacheinander angezeigt werden können Ladungen.

Sind Sie bereit, Ihre Benutzeroberflächen intuitiver und ausdrucksvoller zu gestalten, indem Sie Skeleton-Screens in Ihren eigenen Projekten implementieren? So starten Sie.

Gestalten Sie das Webseiten-Layout

Das Entwerfen eines Webseiten-Layouts hilft Ihnen, Ihre Erwartungen zu kristallisieren. Sie sollten Ihr Ziel festlegen, das Layout definieren, alle erforderlichen Seiten hinzufügen und es für verschiedene Bildschirmgrößen zugänglich und reaktionsfähig machen. Betrachten Sie zunächst ein einfaches Design mit Titelbild, Profilbild, etwas Text und Call-to-Action-Schaltflächen.

Nachdem Sie das Layout des Layouts entweder auf Papier oder mit einer App wie Figma oder Adobe XD entworfen haben, ist es an der Zeit, die HTML-Struktur vorzubereiten.

Bauen Sie die Grundstruktur auf

Erstellen Sie eine neue Datei index.html und schreibe etwas HTML für das Layout innerhalb eines Elternteils mit class="Profil-Container". Hinzufügen class=”Skelett” auf jedes Element, um den Skelett-Bildschirmladeeffekt anzuwenden. Sie entfernen diese Klasse, wenn der Inhalt mit JavaScript geladen wird.

Notiz: Vergessen Sie nicht, die CSS- und JavaScript-Dateien im Header Ihres. zu verlinken index.html Datei.

John Doe

Softwareentwickler @ Google || Full-Stack-Entwickler || Selbst beigebracht

Bengaluru, Karnataka, Indien • Kontaktinformation


534 Verbindungen






Nachricht
Mehr

Beginnen Sie mit dem Gestalten Ihrer Seite

Wenden Sie die grundlegenden CSS-Attribute an wie Rand, Schriftfamilie, und Farbe über den ganzen Körper.

Karosserie {
 Rand: 0;
 Schriftfamilie: Arial;
 Farbe: RGB (255, 255, 255, 0,9);
}

Ladeeffekt hinzufügen

Um einen Ladeeffekt hinzuzufügen, fügen Sie ein ::nachPseudoelement zur Skelettklasse, die sich über ein oder zwei Sekunden von links (-100%) nach rechts (100%) bewegt, was zu einer Schimmeranimation führt.

.Skelett {
 Position: relativ;
 Breite: max-Inhalt;
 Überlauf versteckt;
 Randradius: 4px;
 Hintergrundfarbe: #1e2226 !wichtig;
 Farbe: transparent !wichtig;
 Rahmenfarbe: #1e2226 !wichtig;
 Benutzerauswahl: keine;
 Cursor: Standard;
}
.skelett img {
 Deckkraft: 0;
}
.skelett:: nach {
 Position: absolut;
 oben: 0;
 rechts: 0;
 unten: 0;
 links: 0;
 transformieren: translateX(-100%);
 Hintergrundbild: linear-gradient(
 90 Grad,
 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: Schimmer 2s unendlich;
 Inhalt: '';
}
@keyframes schimmern {
 100% {
 transformieren: translateX(100%);
 }
}

Style die Bilder

Lassen Sie uns nun das Profil und das Titelbild stylen. Vergiss nicht zu setzen Überlauf versteckt; um Unstimmigkeiten zu vermeiden.

img {
 Breite: 100 %;
 vertikal ausrichten: Mitte;
}
.profile-container {
 Breite: 95%;
 maximale Breite: 780px;
 Rand: 0 automatisch;
 Randradius: 8px;
 Rand oben: 32px;
 Hintergrundfarbe: #1e2226;
 Überlauf versteckt;
 Position: relativ;
}
.cover-img {
 Breite: 100 %;
 Überlauf versteckt;
 Hintergrundfarbe: #1e2226;
 Seitenverhältnis: 4 / 1;
}
.profile-img {
 Randradius: 50%;
 Breite: 160px;
 Höhe: 160px;
 Rahmen: 4px solid #000;
 Hintergrundfarbe: #1e2226;
 Rand: 0 automatisch;
 Position: relativ;
 Überlauf versteckt;
 unten: 100px;
}

Machen Sie es reaktionsschnell

Um sicherzustellen, dass Ihr Design auf verschiedenen Bildschirmen reagiert, wenden Sie Medienabfragen entsprechend an. Wenn Sie ein Anfänger in der Webentwicklung sind, sollten Sie es lernen Verwendung von Medienabfragen in HTML und CSS weil sie beim Erstellen von responsiven Websites sehr wichtig sind.

@media (max-Breite: 560px) {
 .profile-img {
 Breite: 100px;
 Höhe: 100px;
 unten: 60px;
 }
}

Stylen Sie den Text

Stylen Sie den Text, indem Sie a. einstellen Rand, Schriftgröße, und Schriftstärke. Sie können auch die Textfarbe ändern, eine Überschrift, einen Absatz oder einen Anker hinzufügen Tag nach Ihren Wünschen. Das Hinzufügen eines Hover-Effekts zum Anker-Tag ist nützlich, da er den Benutzer über einen Link informiert.

.profil-text {
 Rand oben: -80px;
 Polsterung: 0 16px;
}
.profil-text h1 {
 Rand-unten: 0;
 Schriftgröße: 24px;
 Überlauf versteckt;
}
.profil-text p {
 Rand: 4px 0;
 Überlauf versteckt;
}
.profil-text h5 {
 Rand oben: 4px;
 Schriftgröße: 14px;
 Rand-unten: 8px;
 Schriftstärke: 400;
 Farbe: #ffffff99;
 Überlauf versteckt;
}
.profil-text a {
 Farbe: #70b5f9;
 Schriftgröße: 14px;
 Textdekoration: keine;
 Schriftstärke: 600;
}
.profil-text a: schweben {
 Farbe: #70b5f9;
 Textdekoration: unterstreichen;
}

Stylen Sie den CTA

Ein Call-to-Action (CTA) ist wichtig, da Sie im Allgemeinen die Besuche Ihrer Benutzer in irgendeiner Weise konvertieren möchten. Wenn Sie ihm eine leicht erkennbare Farbe geben, wird Ihr CTA auf der Seite hervorgehoben.

.profile-cta {
 Füllung: 16px 16px 32px;
 Anzeige: flexibel;
}
.profile-cta a {
 Polsterung: 6px 16px;
 Randradius: 24px;
 Textdekoration: keine;
 Bildschirmsperre;
}
.nachricht-btn {
 Hintergrundfarbe: #70b5f9;
 Farbe: #000;
}
.more-btn {
 Farbe: erben;
 Rahmen: 1px festes rgba (255, 255, 255, 0,9);
 Rand links: 8px;
}

Ausgabe:

Deaktivieren Sie den Skelettladeeffekt mit JavaScript

Nachdem Sie nun den führenden Effekt mit CSS hinzugefügt haben, ist es an der Zeit, ihn mit JavaScript zu deaktivieren. Die Animation wird standardmäßig unendlich oft wiederholt, aber Sie möchten, dass sie nur einige Sekunden lang ausgeführt wird. Sie können die Zeit mit auf 4000 Millisekunden einstellen setTimeout. Es wird die Skelettklasse nach 4 Sekunden von allen Elementen entfernen.

Notiz: Stellen Sie sicher, dass Sie hinzufügen kurz vor ende der Sektion.

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

Ausgabe:

Was ist JavaScript und wie funktioniert es?

Sie haben erfolgreich einen Skelett-Bildschirmladeeffekt mit HTML, CSS und JavaScript erstellt. Wenn jetzt jemand neue Inhalte vom Server anfordert, können Sie den Ladeeffekt des Skelettbildschirms anzeigen, während die Daten geladen werden. Es wird immer mehr zu einem beliebten Designtrend, wie Sie auf Websites wie Google, Facebook und Slack sehen können.

Wenn Sie JavaScript noch nicht kennen, können Sie die Grundlagen erlernen, indem Sie JavaScript verstehen und wie es mit HTML und CSS interagiert.

Was ist JavaScript und wie funktioniert es?

Wenn Sie Webentwicklung lernen, erfahren Sie hier, was Sie über JavaScript wissen müssen und wie es mit HTML und CSS funktioniert.

Weiter lesen

Über den Autor