Скелетон екрани су саставни део задржавања посетилаца у модерним трендовима дизајна. Они стварају илузију брзине и управљају очекивањима корисника тако што их обавештавају о статусу садржаја странице. Једно од најважнијих, али потцењених решења које скелетни екрани нуде је њихова помоћ у избегавању Кумулативни померање распореда (ЦЛС), омогућавајући садржају да се приказује одједном, а не узастопно. оптерећења.

Спремни да своје интерфејсе учините интуитивнијим и изражајнијим имплементацијом скелет екрана у сопствене пројекте? Ево како да почнете.

Дизајнирајте изглед веб странице

Дизајнирање изгледа веб странице помаже вам да кристализујете своја очекивања. Требало би да поставите свој циљ, дефинишете изглед, додате све потребне странице и учините га приступачним и прилагодљивим за различите величине екрана. За сада размотрите једноставан дизајн са насловном сликом, сликом профила, мало текста и дугмадима за позив на акцију.

Када направите нацрт изгледа, било користећи папир или апликацију као што је Фигма или Адобе КСД, време је да припремите ХТМЛ структуру.

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

Креирајте нову датотеку индек.хтмл и напишите ХТМЛ за изглед унутар родитеља са цласс="профиле-цонтаинер". Додати цласс=”скелет” на сваки елемент како би се применио ефекат учитавања скелета екрана. Уклонићете ову класу када се садржај учита помоћу ЈаваСцрипт-а.

Белешка: Не заборавите да повежете ЦСС и ЈаваСцрипт датотеке у заглављу вашег индек.хтмл фајл.

Н.Н. лице

Софтверски инжењер @ Гоогле || Фулл Стацк Девелопер || Селф Таугхт

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


534 везе






Порука
Више

Почните да стилизујете своју страницу

Примените основне ЦСС атрибуте као што су маргина, породица фонтова, и боја по целом телу.

тело {
 маргина: 0;
 фонт-фамили: Ариал;
 боја: ргба (255, 255, 255, 0.9);
}

Додајте ефекат учитавања

Да бисте додали ефекат учитавања, додајте ан ::послепсеудо-елемент на класу скелета која се помера са леве (-100%) надесно (100%) током секунде или две, што резултира светлуцавом анимацијом.

.скелет {
 положај: релативан;
 ширина: мак-садржај;
 преливање: скривено;
 бордер-радиус: 4пк;
 бацкгроунд-цолор: #1е2226 !импортант;
 боја: транспарентна !важно;
 бордер-цолор: #1е2226 !импортант;
 усер-селецт: нема;
 курсор: подразумевано;
}
.скелетон имг {
 непрозирност: 0;
}
.скелетон:: после {
 позиција: апсолутна;
 топ: 0;
 десно: 0;
 боттом: 0;
 лево: 0;
 трансформ: транслатеКс(-100%);
 позадинска слика: линеарни градијент (
 90 степени,
 ргба (255, 255, 255, 0) 0,
 ргба (255, 255, 255, 0,2) 20%,
 ргба (255, 255, 255, 0,5) 60%,
 ргба (255, 255, 255, 0)
 );
 анимација: схиммер 2с инфините;
 садржај: '';
}
@кеифрамес схиммер {
 100% {
 трансформ: транслатеКс(100%);
 }
}

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

Сада, хајде да стилизујемо профил и насловну слику. Не заборавите да подесите преливање: скривено; да би се избегле било какве недоследности.

имг {
 ширина: 100%;
 вертикално поравнање: средина;
}
.профиле-цонтаинер {
 ширина: 95%;
 мак-видтх: 780пк;
 маргина: 0 ауто;
 бордер-радиус: 8пк;
 маргин-топ: 32пк;
 бацкгроунд-цолор: #1е2226;
 преливање: скривено;
 положај: релативан;
}
.цовер-имг {
 ширина: 100%;
 преливање: скривено;
 бацкгроунд-цолор: #1е2226;
 однос ширине и висине: 4 / 1;
}
.профиле-имг {
 радијус границе: 50%;
 ширина: 160пк;
 висина: 160пк;
 граница: 4пк чврста #000;
 бацкгроунд-цолор: #1е2226;
 маргина: 0 ауто;
 положај: релативан;
 преливање: скривено;
 боттом: 100пк;
}

Нека буде одзиван

Да бисте били сигурни да ваш дизајн одговара на различитим екранима, примените медијске упите у складу са тим. Ако сте почетник у развоју веба, требало би да научите како користити медијске упите у ХТМЛ-у и ЦСС-у јер су веома важни када правите респонзивне веб странице.

@медиа (макс. ширина: 560 пиксела) {
 .профиле-имг {
 ширина: 100пк;
 висина: 100пк;
 дно: 60пк;
 }
}

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

Стилизирајте текст постављањем а маргина, фонт-сизе, и фонт-веигхт. Такође можете променити боју текста, додати наслов, пасус или сидро означите према вашим жељама. Додавање ефекта лебдења у ознаку сидра је корисно јер омогућава кориснику да сазна за везу.

.профиле-тект {
 маргин-топ: -80пк;
 паддинг: 0 16пк;
}
.профиле-тект х1 {
 маргин-боттом: 0;
 фонт-сизе: 24пк;
 преливање: скривено;
}
.профиле-тект п {
 маргина: 4пк 0;
 преливање: скривено;
}
.профиле-тект х5 {
 маргин-топ: 4пк;
 фонт-сизе: 14пк;
 маргин-боттом: 8пк;
 фонт-веигхт: 400;
 боја: #фффффф99;
 преливање: скривено;
}
.профиле-тект а {
 боја: #70б5ф9;
 фонт-сизе: 14пк;
 текст-декорација: нема;
 фонт-веигхт: 600;
}
.профиле-тект а: ховер {
 боја: #70б5ф9;
 текст-декорација: подвучена;
}

Стилизирајте ЦТА

Позив на акцију (ЦТА) је важан јер ћете генерално желети да на неки начин конвертујете посете својих корисника. Дајући му лако уочљиву боју, помоћи ће вашем позиву на акцију да се истакне на страници.

.профиле-цта {
 паддинг: 16пк 16пк 32пк;
 дисплеј: флек;
}
.профиле-цта а {
 паддинг: 6пк 16пк;
 бордер-радиус: 24пк;
 текст-декорација: нема;
 дисплеј блок;
}
.мессаге-бтн {
 бацкгроунд-цолор: #70б5ф9;
 боја: #000;
}
.море-бтн {
 боја: наследити;
 граница: 1пк чврста ргба (255, 255, 255, 0.9);
 маргин-лефт: 8пк;
}

Излаз:

Искључите ефекат учитавања скелета користећи ЈаваСцрипт

Сада када сте додали водећи ефекат помоћу ЦСС-а, време је да га искључите помоћу ЈаваСцрипт-а. Анимација ће се подразумевано понављати бесконачан број пута, али желите да се покреће само неколико секунди. Можете да подесите време на 4000 милисекунди користећи сетТимеоут. Уклониће класу скелета из свих елемената након 4 секунде.

Белешка: Обавезно додајте непосредно пред крај одељак.

цонст скелети = доцумент.куериСелецторАлл('.скелет')
скелети.форЕацх((скелет) => {
 сетТимеоут(() => {
скелет.цлассЛист.ремове('скелет')
 }, 4000)
})

Излаз:

Шта је ЈаваСцрипт и како функционише?

Успешно сте направили ефекат учитавања скелета екрана користећи ХТМЛ, ЦСС и ЈаваСцрипт. Сада, кад год неко затражи нови садржај са сервера, можете приказати ефекат учитавања скелетног екрана док се подаци учитавају. Постаје све популарнији тренд дизајна, као што можете видети на сајтовима као што су Гоогле, Фацебоок и Слацк.

У међувремену, ако сте нови у ЈаваСцрипт-у, можете научити основе тако што ћете разумети ЈаваСцрипт и начин на који он ступа у интеракцију са ХТМЛ-ом и ЦСС-ом.

Шта је ЈаваСцрипт и како функционише?

Ако учите веб развој, ево шта треба да знате о ЈаваСцрипт-у и како он функционише са ХТМЛ-ом и ЦСС-ом.

Реад Нект

О аутору