Ekrany szkieletowe są integralną częścią utrzymania gości w nowoczesnych trendach projektowych. Tworzą iluzję szybkości i zarządzają oczekiwaniami użytkowników, informując ich o stanie zawartości strony. Jednym z najbardziej istotnych, ale niedocenianych rozwiązań oferowanych przez ekrany szkieletowe, jest ich pomoc w unikaniu Kumulatywne przesunięcie układu (CLS), umożliwiające wyświetlanie całej zawartości naraz, a nie sekwencyjnie, jak to się dzieje masa.

Gotowy, aby interfejsy były bardziej intuicyjne i wyraziste, wdrażając ekrany szkieletowe we własnych projektach? Oto jak zacząć.

Zaprojektuj układ strony internetowej

Zaprojektowanie układu strony internetowej pomoże Ci skrystalizować Twoje oczekiwania. Powinieneś ustawić swój cel, zdefiniować układ, dodać wymagane strony i sprawić, by były dostępne i responsywne dla różnych rozmiarów ekranu. Na razie rozważ prosty projekt z obrazem okładki, obrazem profilowym, małym tekstem i przyciskami wezwania do działania.

Po opracowaniu projektu układu, używając papieru lub aplikacji takiej jak Figma lub Adobe XD, nadszedł czas na przygotowanie struktury HTML.

Zbuduj podstawową strukturę

Utwórz nowy plik index.html i napisz trochę kodu HTML dla układu wewnątrz rodzica z class=”kontener-profilu”. Dodać klasa=”szkielet” do każdego elementu, aby zastosować efekt ładowania szkieletu ekranu. Ta klasa zostanie usunięta, gdy zawartość zostanie załadowana za pomocą JavaScript.

Notatka: Nie zapomnij połączyć plików CSS i JavaScript w nagłówku swojego index.html plik.

nieznany z nazwiska

Inżynier oprogramowania @ Google || Programista pełnego stosu || Samoukiem

Bengaluru, Karnataka, Indie • Informacje kontaktowe


534 połączeń






Wiadomość
Jeszcze

Zacznij stylizować swoją stronę

Zastosuj podstawowe atrybuty CSS, takie jak margines, rodzina czcionek, oraz kolor na całym ciele.

ciało {
 margines: 0;
 rodzina czcionek: Arial;
 kolor: rgba (255, 255, 255, 0,9);
}

Dodaj efekt ładowania

Aby dodać efekt ładowania, dodaj ::popseudoelement do klasy szkieletu, która przesuwa się od lewej (-100%) do prawej (100%) w ciągu sekundy lub dwóch, co skutkuje animacją migotania.

.szkielet {
 pozycja: względna;
 szerokość: maksymalna zawartość;
 przelew: ukryty;
 promień obramowania: 4px;
 kolor tła: #1e2226 !ważne;
 kolor: przezroczysty !ważne;
 kolor obramowania: #1e2226 !ważne;
 wybór użytkownika: brak;
 kursor: domyślny;
}
.szkielet img {
 krycie: 0;
}
.szkielet:: po {
 pozycja: bezwzględna;
 góra: 0;
 prawo: 0;
 dół: 0;
 po lewej: 0;
 transformacja: przetłumaczX(-100%);
 obraz w tle: gradient liniowy (
 90 stopni,
 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)
 );
 animacja: nieskończoność migotania 2s;
 zawartość: '';
}
@klatki kluczowe migotać {
 100% {
 transformacja: przetłumaczX(100%);
 }
}

Stylizuj obrazy

Teraz dostosujmy styl profilu i okładki. Nie zapomnij ustawić przelew: ukryty; aby uniknąć wszelkich niespójności.

obrazek {
 szerokość: 100%;
 wyrównanie w pionie: środek;
}
.kontener-profilu {
 szerokość: 95%;
 maksymalna szerokość: 780px;
 margines: 0 auto;
 promień obramowania: 8px;
 margines górny: 32px;
 kolor tła: #1e2226;
 przelew: ukryty;
 pozycja: względna;
}
.okładka-obraz {
 szerokość: 100%;
 przelew: ukryty;
 kolor tła: #1e2226;
 proporcje: 4/1;
}
.profil-img {
 promień graniczny: 50%;
 szerokość: 160px;
 wysokość: 160px;
 obramowanie: 4px stałe #000;
 kolor tła: #1e2226;
 margines: 0 auto;
 pozycja: względna;
 przelew: ukryty;
 dół: 100px;
}

Niech będzie responsywny

Aby mieć pewność, że projekt reaguje na różne ekrany, zastosuj odpowiednie zapytania o media. Jeśli jesteś początkującym tworzeniem stron internetowych, powinieneś się nauczyć jak używać zapytań o media w HTML i CSS bo są bardzo ważne przy tworzeniu responsywnych stron internetowych.

@media (maksymalna szerokość: 560px) {
 .profil-img {
 szerokość: 100px;
 wysokość: 100px;
 dół: 60px;
 }
}

Stylizuj tekst

Stylizuj tekst, ustawiając a margines, rozmiar czcionki, oraz grubość czcionki. Możesz także zmienić kolor tekstu, dodać nagłówek, akapit lub kotwicę oznacz zgodnie z własnymi preferencjami. Dodanie efektu najechania do znacznika zakotwiczenia jest przydatne, ponieważ informuje użytkownika o łączu.

.profil-tekst {
 margines górny: -80px;
 dopełnienie: 0 16px;
}
.tekst-profilu h1 {
 margines-dolny: 0;
 rozmiar czcionki: 24px;
 przelew: ukryty;
}
.profil-tekst p {
 margines: 4px 0;
 przelew: ukryty;
}
.profil-tekst h5 {
 margines górny: 4px;
 rozmiar czcionki: 14px;
 margines-dolny: 8px;
 grubość czcionki: 400;
 kolor: #ffffff99;
 przelew: ukryty;
}
.profile-text a {
 kolor: #70b5f9;
 rozmiar czcionki: 14px;
 dekoracja tekstu: brak;
 grubość czcionki: 600;
}
.profile-text a: najedź {
 kolor: #70b5f9;
 dekoracja tekstu: podkreślenie;
}

Nadaj styl CTA

Wezwanie do działania (CTA) jest ważne, ponieważ zazwyczaj chcesz w jakiś sposób przekonwertować odwiedziny użytkowników. Nadanie mu łatwo zauważalnego koloru pomoże wyróżnić Twoje wezwanie do działania na stronie.

.profil-cta {
 dopełnienie: 16px 16px 32px;
 wyświetlacz: elastyczny;
}
.profil-cta a {
 dopełnienie: 6px 16px;
 promień obramowania: 24px;
 dekoracja tekstu: brak;
 Blok wyświetlacza;
}
.wiadomość-btn {
 kolor tła: #70b5f9;
 kolor: #000;
}
.więcej-btn {
 kolor: odziedzicz;
 obramowanie: 1px solid rgba (255, 255, 255, 0,9);
 margines lewy: 8px;
}

Wyjście:

Wyłącz efekt ładowania szkieletu za pomocą JavaScript

Teraz, gdy dodałeś wiodący efekt za pomocą CSS, czas wyłączyć go za pomocą JavaScript. Animacja będzie domyślnie powtarzana nieskończoną liczbę razy, ale chcesz, aby działała tylko przez kilka sekund. Możesz ustawić czas na 4000 milisekund za pomocą setTimeout. Po 4 sekundach usunie klasę szkieletu ze wszystkich elementów.

Notatka: Pamiętaj, aby dodać tuż przed końcem Sekcja.

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

Wyjście:

Co to jest JavaScript i jak to działa?

Udało Ci się pomyślnie utworzyć szkieletowy efekt ładowania ekranu przy użyciu HTML, CSS i JavaScript. Teraz za każdym razem, gdy ktoś zażąda nowej zawartości z serwera, możesz wyświetlić efekt ładowania szkieletu ekranu podczas ładowania danych. Staje się coraz bardziej popularnym trendem w projektowaniu, jak widać na stronach takich jak Google, Facebook i Slack.

Tymczasem, jeśli nie masz doświadczenia w JavaScript, możesz nauczyć się podstaw, rozumiejąc JavaScript i jego interakcje z HTML i CSS.

Co to jest JavaScript i jak działa?

Jeśli uczysz się tworzenia stron internetowych, oto, co musisz wiedzieć o JavaScript i jego współpracy z HTML i CSS.

Czytaj dalej

O autorze