Скелетните екрани са неразделна част от задържането на посетителите в съвременните дизайнерски тенденции. Те създават илюзия за скорост и управляват очакванията на потребителите, като ги информират за състоянието на съдържанието на страницата. Едно от най-важните, но подценявани решения, които скелетните екрани предлагат, е тяхната помощ за избягване Кумулативно изместване на оформлението (CLS), което позволява на съдържанието да се показва наведнъж, а не последователно, докато товари.

Готови ли сте да направите вашите интерфейси по-интуитивни и изразителни, като внедрите скелетни екрани във вашите собствени проекти? Ето как да започнете.

Проектирайте оформлението на уеб страницата

Проектирането на оформление на уеб страница ви помага да изкристализирате очакванията си. Трябва да зададете целта си, да дефинирате оформлението, да добавите всички необходими страници и да я направите достъпна и отзивчива за различни размери на екрана. Засега помислете за прост дизайн с изображение на корицата, изображение на профил, малко текст и бутони с призив за действие.

След като изготвите дизайна на оформлението, като използвате хартия или приложение като Figma или Adobe XD, е време да подготвите HTML структурата.

Изградете основната структура

Създайте нов файл index.html и напишете малко HTML за оформлението вътре в родител с клас=”контейнер за профил”. Добавете клас = "скелет" към всеки елемент, за да приложите ефекта на зареждане на скелетния екран. Ще премахнете този клас, когато съдържанието се зареди с помощта на JavaScript.

Забележка: Не забравяйте да свържете CSS и JavaScript файловете в заглавката на вашия index.html файл.

Джон Доу

Софтуерен инженер @ Google || Разработчик на пълен стек || Самоук

Бенгалуру, Карнатака, Индия • Информация за контакт


534 връзки






Съобщение
| Повече ▼

Започнете да стилизирате страницата си

Приложете основните CSS атрибути като марж, шрифтово семейство, и цвят по цялото тяло.

тяло {
 марж: 0;
 семейство шрифтове: Arial;
 цвят: rgba (255, 255, 255, 0.9);
}

Добавете ефект на зареждане

За да добавите ефект на зареждане, добавете ::следпсевдоелемент към класа скелет, който се движи от ляво (-100%) надясно (100%) за секунда или две, което води до блещукаща анимация.

.skeleton {
 позиция: относителна;
 ширина: max-content;
 преливане: скрито;
 радиус на границата: 4px;
 фон-цвят: #1e2226 !важно;
 цвят: прозрачен !важно;
 цвят на границата: #1e2226 !важно;
 потребителски избор: няма;
 курсор: по подразбиране;
}
.skeleton img {
 непрозрачност: 0;
}
.skeleton:: след {
 позиция: абсолютна;
 отгоре: 0;
 вдясно: 0;
 дъно: 0;
 вляво: 0;
 transform: translateX(-100%);
 фоново изображение: линеен градиент(
 90 градуса,
 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)
 );
 анимация: shimmer 2s infinite;
 съдържание: '';
}
@ключови кадри блясък {
 100% {
 transform: translateX(100%);
 }
}

Оформете изображенията

Сега нека стилизираме профила и изображението на корицата. Не забравяйте да настроите преливане: скрито; за да се избегнат всякакви несъответствия.

img {
 ширина: 100%;
 вертикално подравняване: средно;
}
.profile-container {
 ширина: 95%;
 максимална ширина: 780px;
 марж: 0 автоматично;
 радиус на границата: 8px;
 margin-top: 32px;
 цвят на фона: #1e2226;
 преливане: скрито;
 позиция: относителна;
}
.cover-img {
 ширина: 100%;
 преливане: скрито;
 цвят на фона: #1e2226;
 съотношение на страните: 4/1;
}
.profile-img {
 радиус на границата: 50%;
 ширина: 160px;
 височина: 160px;
 граница: 4px плътно #000;
 цвят на фона: #1e2226;
 марж: 0 автоматично;
 позиция: относителна;
 преливане: скрито;
 отдолу: 100px;
}

Направете го отзивчив

За да сте сигурни, че вашият дизайн реагира на различни екрани, приложете съответно медийни заявки. Ако сте начинаещ в уеб разработката, трябва да се научите как да използвате медийни заявки в HTML и CSS защото те са изключително важни при изграждането на адаптивни уебсайтове.

@media (максимална ширина: 560 пиксела) {
 .profile-img {
 ширина: 100px;
 височина: 100px;
 отдолу: 60px;
 }
}

Стилизиране на текста

Оформете текста, като зададете a марж, размер на шрифта, и шрифт-тегло. Можете също да промените цвета на текста, да добавите заглавие, абзац или котва маркирайте според вашите предпочитания. Добавянето на ефект на задържане на курсора към маркера за закрепване е полезно, защото позволява на потребителя да знае за връзка.

.profile-text {
 margin-top: -80px;
 padding: 0 16px;
}
.profile-text h1 {
 margin-bottom: 0;
 размер на шрифта: 24px;
 преливане: скрито;
}
.profile-text p {
 поле: 4px 0;
 преливане: скрито;
}
.profile-text h5 {
 margin-top: 4px;
 размер на шрифта: 14px;
 margin-bottom: 8px;
 шрифт-тегло: 400;
 цвят: #ffffff99;
 преливане: скрито;
}
.profile-text a {
 цвят: #70b5f9;
 размер на шрифта: 14px;
 текст-украса: няма;
 шрифт-тегло: 600;
}
.profile-text a: задръжте курсора на мишката {
 цвят: #70b5f9;
 текст-украса: подчертаване;
}

Оформете CTA

Призивът за действие (CTA) е важен, защото обикновено искате да конвертирате посещенията на потребителите си по някакъв начин. Придаването му на лесно забележим цвят ще помогне на вашия CTA да се открои на страницата.

.profile-cta {
 допълване: 16px 16px 32px;
 дисплей: гъвкав;
}
.profile-cta a {
 допълване: 6px 16px;
 радиус на границата: 24px;
 текст-украса: няма;
 дисплей: блок;
}
.message-btn {
 цвят на фона: #70b5f9;
 цвят: #000;
}
.more-btn {
 цвят: наследи;
 граница: 1px плътен rgba (255, 255, 255, 0.9);
 margin-left: 8px;
}

Изход:

Изключете ефекта на зареждане на скелет с помощта на JavaScript

Сега, след като сте добавили водещия ефект с помощта на CSS, е време да го изключите с помощта на JavaScript. Анимацията ще се повтаря безкраен брой пъти по подразбиране, но вие искате да се изпълнява само за няколко секунди. Можете да зададете времето на 4000 милисекунди, като използвате setTimeout. Ще премахне скелетния клас от всички елементи след 4 секунди.

Забележка: Не забравяйте да добавите точно преди края на раздел.

const скелети = document.querySelectorAll('.skeleton')
скелети.за всеки((скелет) => {
 setTimeout(() => {
скелет.classList.remove('скелет')
 }, 4000)
})

Изход:

Какво е JavaScript и как работи?

Успешно създадохте ефект за зареждане на скелетен екран с помощта на HTML, CSS и JavaScript. Сега, когато някой поиска ново съдържание от сървъра, можете да покажете ефекта на зареждане на скелетния екран, докато данните се зареждат. Това става все по-популярна тенденция в дизайна, както можете да го видите на сайтове като Google, Facebook и Slack.

Междувременно, ако сте нов в JavaScript, можете да научите основите, като разберете JavaScript и как той взаимодейства с HTML и CSS.

Какво е JavaScript и как работи?

Ако учите уеб разработка, ето какво трябва да знаете за JavaScript и как работи с HTML и CSS.

Прочетете Следващото

За автора