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

Готовы сделать свои интерфейсы более интуитивно понятными и выразительными, реализовав скелетные экраны в своих проектах? Вот как начать.

Дизайн макета веб-страницы

Разработка макета веб-страницы поможет вам оправдать ваши ожидания. Вы должны установить свою цель, определить макет, добавить необходимые страницы и сделать его доступным и адаптивным для экранов разных размеров. А пока рассмотрите простой дизайн с изображением обложки, изображением профиля, небольшим текстом и кнопками с призывом к действию.

После того, как вы разработали дизайн макета, используя бумагу или приложение, такое как Figma или Adobe XD, пора подготовить структуру HTML.

Постройте базовую структуру

Создать новый файл index.html и напишите HTML-код для макета внутри родительского с участием class = "профиль-контейнер". Добавлять class = "скелет" к каждому элементу, чтобы применить эффект загрузки экрана скелета. Вы удалите этот класс, когда контент будет загружен с помощью JavaScript.

Примечание: Не забудьте связать файлы CSS и JavaScript в заголовке вашего index.html файл.

Джон Доу

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

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


534 контакта






Сообщение
Более

Начните стилизовать свою страницу

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

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

Добавить эффект загрузки

Чтобы добавить эффект загрузки, добавьте ::послепсевдоэлемент в класс скелета, который перемещается слева (-100%) вправо (100%) в течение секунды или двух, что приводит к анимации мерцания.

.skeleton {
 положение: относительное;
 ширина: макс-контент;
 переполнение: скрыто;
 радиус границы: 4 пикселя;
 цвет фона: # 1e2226! important;
 цвет: прозрачный! важно;
 цвет границы: # 1e2226! важно;
 выбор пользователя: нет;
 курсор: по умолчанию;
}
.skeleton img {
 непрозрачность: 0;
}
.skeleton:: after {
 позиция: абсолютная;
 верх: 0;
 справа: 0;
 внизу: 0;
 слева: 0;
 преобразовать: 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)
 );
 анимация: мерцание 2с бесконечно;
 содержание: '';
}
@keyframes мерцание {
 100% {
 преобразовать: translateX (100%);
 }
}

Стиль изображения

Теперь давайте определим стиль профиля и изображения обложки. Не забудьте установить переполнение: скрыто; чтобы избежать каких-либо несоответствий.

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

Сделайте это отзывчивым

Чтобы убедиться, что ваш дизайн адаптируется на разных экранах, соответствующим образом примените медиа-запросы. Если вы новичок в веб-разработке, вам следует изучить как использовать медиа-запросы в HTML и CSS потому что они очень важны при создании адаптивных веб-сайтов.

@media (max-width: 560 пикселей) {
 .profile-img {
 ширина: 100 пикселей;
 высота: 100 пикселей;
 внизу: 60 пикселей;
 }
}

Стиль текста

Стилизуйте текст, установив допуск, размер шрифта, и font-weight. Вы также можете изменить цвет текста, добавить заголовок, абзац или привязку отметьте в соответствии с вашими предпочтениями. Добавление эффекта наведения к тегу привязки полезно, потому что оно позволяет пользователю узнать о ссылке.

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

Стиль CTA

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

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

Вывод:

Отключить эффект загрузки скелета с помощью JavaScript

Теперь, когда вы добавили ведущий эффект с помощью CSS, пора отключить его с помощью JavaScript. По умолчанию анимация будет повторяться бесконечное количество раз, но вы хотите, чтобы она выполнялась только в течение нескольких секунд. Вы можете установить время на 4000 миллисекунд, используя setTimeout. Он удалит класс скелета из всех элементов через 4 секунды.

Примечание: Обязательно добавьте незадолго до конца раздел.

const скелеты = document.querySelectorAll ('. скелет')
skeletons.forEach ((скелет) => {
 setTimeout (() => {
скелет.classList.remove ('скелет')
 }, 4000)
})

Вывод:

Что такое JavaScript и как он работает?

Вы успешно создали эффект загрузки скелета экрана с помощью HTML, CSS и JavaScript. Теперь, когда кто-либо запрашивает новый контент с сервера, вы можете отображать эффект загрузки экрана скелета во время загрузки данных. Это становится все более популярным дизайнерским трендом, что можно увидеть на таких сайтах, как Google, Facebook и Slack.

Между тем, если вы новичок в JavaScript, вы можете изучить основы, изучив JavaScript и его взаимодействие с HTML и CSS.

Что такое JavaScript и как он работает?

Если вы изучаете веб-разработку, вот что вам нужно знать о JavaScript и о том, как он работает с HTML и CSS.

Читать далее

Об авторе