Како да своју веб локацију учините прилагодљивом и интерактивном помоћу ЦСС-а и ЈаваСцрипт-а

Поседовање веб локације која је истовремено прилагодљива и интерактивна је неписани захтев за сваког власника веб локације. Предности интерактивне веб странице која се савршено прилагођава било којој величини екрана не могу се прецијенити.

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

У овом чланку са водичем ћете научити како да своју ХТМЛ и ЦСС веб локацију учините прилагодљивом и интерактивном.

Учините своју веб локацију интерактивном

Када правите веб локацију, почињете одозго надоле. Стога је интерактивност ваше веб странице процес који такође треба да почне на врху. Узми ову веб локацију портфеља изградили смо као пример. Има чист дизајн, али није потпуно интерактиван.

Свака ставка менија мења боју када пређете мишем преко ње, али како да знате на ком делу веб-сајта се налазите? Па, постоје два начина да то урадите — активирајте ставке менија помоћу онсцролл и онцлицк догађаји.

Активирање ставке менија сваки пут када скролујете нагоре или надоле по веб локацији ће захтевати употребу ЈаваСцрипт функције коју можете назвати „ацтивеМену“. Овој функцији ће бити потребан приступ ставкама менија на траци за навигацију, као и сваком одељку веб локације. На срећу, ово можете постићи уз помоћ куериСелецторАлл ДОМ селектор.

У директоријуму вашег пројекта, мораћете да креирате нову ЈаваСцрипт датотеку и повежете је са ХТМЛ датотеком користећи следећи ред кода:

У а скрипта ознака, тхе срц валуе је име ЈаваСцрипт датотеке, што је у горњем примеру маин.јс.

Датотека маин.јс

// коришћењем јавасцрипт-а за активирање ставке менија на померању
цонст ли = доцумент.куериСелецторАлл(".линкс");
цонст сец = доцумент.куериСелецторАлл("сецтион");
фунцтион ацтивеМену(){
лет лен=сец.ленгтх;
вхиле(--лен && виндов.сцроллИ + 97 < сец[лен].оффсетТоп){}
ли.форЕацх (лтк => лтк.цлассЛист.ремове("ацтиве"));
ли[лен].цлассЛист.адд("активан");
}
ацтивеМену();
виндов.аддЕвентЛистенер("сцролл", ацтивеМену);

Тхе куериСелецторАлл селектор у коду изнад хвата све ставке менија користећи везе класа. Такође хвата све делове веб локације користећи одељак таг. Тхе ацтиватеМену функција затим узима дужину сваког одељка и уклања или додаје „активну“ променљиву у зависности од позиције померања корисника.

Да би горњи код функционисао, мораћете да ажурирате листу стилова веб-сајта портфеља да бисте укључили следећи код у одељку за навигацију:

#навбар .мену ли.ацтиве а{
боја: #ффф;
}

Активирање ставки менија на клик

 //користећи јкуери за активирање ставке менија онцлицк
$(доцумент).он('клик', 'ли', функција(){
$(тхис).аддЦласс('ацтиве').сиблингс().ремовеЦласс('ацтиве')
})

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

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

одељак{
сцролл-маргин-топ: 4.5рем;
}

Горњи код ће обезбедити да када дођете до сваког одељка кликом, навигациона трака ће остати 4,5 рем изнад сваког одељка (или 72 пиксела). Још једна сјајна функција коју можете додати на своју веб локацију је глатко померање, што можете постићи помоћу следећег ЦСС кода:

хтмл {
померање: глатко;
}

Учините своју почетну страницу интерактивном

На већини веб локација, корисник ће видети своје прво дугме на навигационој траци или на почетној страници. Осим што изгледа као позив на акцију, дугме би такође требало да буде интерактивно. Одличан начин да се то постигне је помоћу ЦСС-а :лебдети селектор, који елементу додељује ново стање сваки пут када корисник миш пређе преко њега.

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

Коришћењем селектора :ховер

 .бтн: лебдети{
позадина: #ффф;
боја: плава;
ивица: плава пуна;
бордер-радиус: 5пк;
}

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

Још једна одлична карактеристика за почетну страницу је анимација куцања, која користи типед.јс (јКуери скрипта анимације за куцање).

Коришћење типед.јс

// јкуери скрипта за анимацију текста
вар типед = нев Типед(".типинг", {
стрингови: [„Програмер софтвера“],
Брзина типа: 100,
бацкСпеед: 60,
петља: истина
});

Након што додате код изнад у своју ЈаваСцрипт датотеку, мораћете да направите следећу измену у ХТМЛ-у:

А ја сам а 

У коду изнад замењујете текст „Софтвер Девелопер“ у оригиналном коду са класом „типинг“, креирајући анимацију куцања.

Учините друге делове ваше веб странице интерактивним

Креирање услужне класе дугмета и коришћење лебдети селектор ће осигурати да сваки одељак ваше веб странице који има дугме буде интерактиван. ЦСС својства транзиције и трансформације такође имају неке сјајне карактеристике анимације које можете додати на своју веб локацију.

Ако имате галерију или било који одељак са сликама на својој веб локацији, можете да користите два својства поменута изнад да бисте креирали ефекат лебдења на својим сликама. Додавање следећег ЦСС кода сликама у одељку пројекта на веб локацији портфолија створиће ефекат трансформације на сликама у одељку:

.имг-цонтаинер имг{
мак-видтх: 450пк;
транзиција: све 0.3с еасе-оут;
курсор: показивач;
}
.имг-цонтаинер имг: лебдети{
трансформисати: размера (1.2);
}

Учините своју веб локацију прилагодљивом

Када креирате респонзивну веб локацију, постоје четири различита типа уређаја које треба да узмете у обзир — стони рачунари, лаптопови, таблети и паметни телефони. Поред тога, сваки од ових типова уређаја такође има низ различитих величина екрана, али поседовање ове четири категорије је добро место за почетак.

Повезан: Како користити медијске упите у ХТМЛ-у и ЦСС-у за креирање респонзивних веб локација

У свом тренутном стању, веб локација портфеља се добро приказује на стоним и лаптоп рачунарима. Дакле, његово прилагођавање значиће креирање прилагођеног изгледа за таблете и паметне телефоне.

Најбољи начин да се постигне респонзивни дизајн са ЦСС-ом и ХТМЛ-ом је путем медијских упита. Можете поставити медијски упит у ЦСС датотеку или ХТМЛ линк таг. Последњи приступ олакшава скалабилност, а то је и метод који ћу демонстрирати.

Мораћете да направите две додатне ЦСС датотеке. Прва ЦСС датотека ће креирати структуру изгледа за мале лаптопове и таблете у пејзажном режиму. Имаће максималну ширину од 1100пк, као што видите у следећој ознаци везе:

Уметање линије кода изнад унутар глава таг ваше ХТМЛ датотеке (или у овом случају датотеке веб локације портфолија) ће осигурати да сваки уређај са ширином екрана од 1100пк а испод ће користити стајлинг у видесцреен.цсс фајл.

Датотека видесцреен.цсс

/* Кућа */
#навбар .контејнер х1 а спан{
приказ: нема;
}
#хоме .хоме-цонтент .тект-3 спан{
боја: #000000;
}
/* Портфолио */
.пројекти{
јустифи-цонтент: центар;
}
.пројекат{
флек: 0;
}
/* О томе */
.абоут-цонтент{
флек-дирецтион: колона;
}
/* Контакт */
.цонтацт-цонтент{
флек-дирецтион: колона;
}

Горњи код ће произвести прилагодљив изглед на уређајима са величинама екрана од 1100 пиксела и мање, као што можете видети у доњем излазу:

Друга ЦСС датотека ће креирати структуру изгледа за паметне телефоне и таблете у портретном режиму. Имаће максималну ширину од 760пк, као што можете видети у следећој ознаци везе:

Датотека мобиле.цсс

/* Навбар */
#навбар .контејнер х1 а спан{
приказ: нема;
}
#навбар .цонтаинер .мену{
маргин-лефт: 0рем;
}
#шунка-мену{
ширина: 35пк;
висина: 30пк;
маргина: 30пк 0 20пк 20пк;
курсор: показивач;
}
#навбар .цонтаинер .мену-врап .мену{
приказ: нема;
}
.бар{
висина: 5пк;
ширина: 100%;
бацкгроунд-цолор: #фффффф;
дисплеј блок;
бордер-радиус: 5пк;
прелаз: 0,3с лакоћа;
}
#бар1{
трансформ: транслатеИ(-4пк);
}
#бар3{
трансформ: транслатеИ(4пк);
}
/* Кућа */
#кућа{
дисплеј: флек;
бацкгроунд: урл("/имагес/хоме.јпг") центар без понављања;
висина: 100вх;
}
#хоме .цонтаинер{
маргина: 6рем 1рем 2рем 1рем;
паддинг: 2рем;
}
#хоме .хоме-цонтент .тект-1{
фонт-сизе: 20пк;
маргина: 1.2рем;
}
#хоме .хоме-цонтент .тект-2{
фонт-сизе: 45пк;
фонт-веигхт: 500;
маргина: 1рем;
}
#хоме .хоме-цонтент .тект-3{
фонт-сизе: 22пк;
маргина: 1.2рем;
}
#хоме .хоме-цонтент .тект-3 спан{
боја: #0000фф;
фонт-веигхт: 600;
}
#хоме .цонтаинер{
маргин-лефт: 4.5рем;
}
/* О томе */
#абоут .цонтаинер{
паддинг: 0;
}
/* Контакт */
#цонтацт .цонтаинер{
паддинг: 0;
}

Горња датотека ће произвести следећи изглед паметног телефона који реагује:

Други начини за креирање прилагодљивих интерактивних веб локација

Знати како да своју веб локацију учините прилагодљивом и интерактивном користећи ЦСС и ХТМЛ је одлична вештина. Али ово нису једине методе да ваша веб локација буде прилагодљива и интерактивна.

Многи фронтенд оквири, па чак и предлошци на услугама као што је Јоомла, олакшавају интерактивне дизајне који реагују.

15 стилизованих Јоомла шаблона за прилагодљиве веб странице

Желите да направите веб локацију за своје пословање или блог? Испробајте ове Јоомла шаблоне.

Реад Нект

О аутору