Как да направите уебсайта си отзивчив и интерактивен с CSS и JavaScript

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

Трябва да създадете персонализирано изживяване за всеки потребител, който посещава вашия уебсайт, и с няколко CSS свойства и няколко функции на JavaScript, можете да направите точно това.

В тази статия от урока ще научите как да направите своя HTML и CSS уебсайт отзивчив и интерактивен.

Направете уебсайта си интерактивен

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

Всеки елемент от менюто променя цвета си, когато задържите курсора на мишката върху него, но как да разберете в коя секция от уебсайта сте? Е, има два начина да направите това - активиране на елементи от менюто с превъртане и onclick събития.

Активирането на елемент от менюто всеки път, когато превъртате нагоре или надолу по уебсайт, ще изисква използването на функция на JavaScript, която можете да наречете "activeMenu". Тази функция ще изисква достъп до елементите на менюто в навигационната лента, както и до всяка секция на уебсайта. За щастие можете да постигнете това с помощта на querySelectorAll DOM селектор.

В директорията на вашия проект ще трябва да създадете нов JavaScript файл и да го свържете с вашия HTML файл, като използвате следния ред код:

В скрипт етикет, src value е името на JavaScript файла, което в примера по-горе е main.js.

Файлът main.js

// използване на javascript за активиране на елемент от менюто при превъртане
const li = document.querySelectorAll(".links");
const sec = document.querySelectorAll("секция");
функция activeMenu(){
нека len=сек.дължина;
while(--len && window.scrollY + 97 < sec[len].offsetTop){}
li.forEach (ltx => ltx.classList.remove("active"));
li[len].classList.add("активен");
}
ActiveMenu();
window.addEventListener("scroll", activeMenu);

В querySelectorAll селекторът в кода по-горе грабва всички елементи от менюто с помощта на връзки клас. Той също така грабва всички секции на уебсайта с помощта на раздел етикет. В активирате меню След това функцията взема дължината на всеки раздел и премахва или добавя „активна“ променлива в зависимост от позицията на превъртане на потребителя.

За да работи кодът по-горе, ще трябва да актуализирате стиловата таблица на уебсайта на портфолиото, за да включите следния код в секцията за навигация:

#navbar .menu li.active a{
цвят: #fff;
}

Активиране на елементи от менюто при щракване

 //използване на jquery за активиране на елемент от менюто onclick
$(document).on('click', 'li', function(){
$(this).addClass('active').siblings().removeClass('active')
})

Добавянето на кода по-горе към вашия JavaScript файл ще активира всеки раздел, когато потребителят щракне върху съответния елемент от менюто. Въпреки това, той използва jQuery (библиотека на JavaScript), която изпълнява тази задача с минимално количество код.

Проблем, който може да срещнете, когато активирате всеки елемент от менюто при щракване, е, че навигационната лента ще покрива горната част на всяка секция. За да предотвратите това, можете просто да вмъкнете следния код в секцията за помощни програми на листа със стилове:

раздел{
scroll-margin-top: 4.5rem;
}

Кодът по-горе ще гарантира, че когато навигирате до всяка секция чрез щракване, навигационната лента ще остане 4,5 rem над всяка секция (или 72px). Друга страхотна функция, която да добавите към вашия уебсайт е плавно превъртане, което можете да постигнете със следния CSS код:

html {
поведение на превъртане: гладко;
}

Направете началната си страница интерактивна

На повечето уебсайтове потребителят ще види първия си бутон в навигационната лента или началната страница. Освен че изглежда като призив за действие, бутонът трябва да бъде и интерактивен. Страхотен начин да постигнете това е с CSS :hover селектор, който присвоява ново състояние на елемент всеки път, когато мишката на потребителя премине върху него.

На уебсайта на портфолиото единствената връзка на началната страница има btn клас (което му придава вид на бутон). Така че, за да направите този бутон интерактивен, можете просто да зададете :hover селектор към btn клас.

Използване на селектора :hover

 .btn: задържане на мишката{
фон: #fff;
цвят: син;
граница: плътно синьо;
радиус на границата: 5px;
}

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

Друга страхотна функция за началната страница е анимацията за писане, която използва typed.js (скрипт за анимация за въвеждане на jQuery).

Използване на typed.js

// jquery скрипт за писане на текст за анимация
var typed = new Typed(.typing", {
низове: ["Разработчик на софтуер"],
тип Скорост: 100,
BackSpeed: 60,
цикъл: вярно
});

След като добавите кода по-горе към вашия JavaScript файл, ще трябва да направите следната промяна в HTML:

И аз съм а 

В кода по-горе замествате текста „Software Developer“ в оригиналния код с клас „typing“, създавайки анимацията за въвеждане.

Направете други раздели на вашия уебсайт интерактивни

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

Ако имате галерия или секция с изображения на уебсайта си, можете да използвате двете свойства, споменати по-горе, за да създадете ефект на задържане на мишката върху вашите изображения. Добавянето на следния CSS код към изображенията в секцията за проекти на уебсайта на портфолиото ще създаде ефект на трансформация на изображенията в секцията:

.img-container img{
максимална ширина: 450px;
преход: всички 0.3s успокояване;
курсор: показалец;
}
.img-container img: задържане на мишката{
трансформиране: мащаб (1.2);
}

Направете Вашия уебсайт отзивчив

Когато създавате отзивчив уебсайт, има четири различни типа устройства, които трябва да имате предвид – настолни компютри, лаптопи, таблети и смартфони. Освен това всеки от тези типове устройства също има набор от различни размери на екрана, но наличието на тези четири категории е добро място за начало.

Свързани: Как да използвате медийни заявки в HTML и CSS за създаване на адаптивни уебсайтове

В текущото си състояние уебсайтът на портфолиото се показва добре на настолни компютри и лаптопи. Така че, да го направите отзивчив, ще означава създаване на персонализирано оформление за таблети и смартфони.

Най-добрият начин за постигане на отзивчив дизайн с CSS и HTML е чрез медийни заявки. Можете да поставите медийна заявка в CSS файл или HTML връзка етикет. Последният подход улеснява мащабируемостта и това е и методът, който ще демонстрирам.

Ще трябва да създадете два допълнителни CSS файла. Първият CSS файл ще създаде структурата на оформлението за малки лаптопи и таблети в пейзажен режим. Тя ще има максимална ширина от 1100px, както виждате в следния маркер за връзка:

Вмъкване на реда с код по-горе в рамките на глава маркер на вашия HTML файл (или в този случай файла на уебсайта на портфолиото) ще гарантира, че всяко устройство с ширина на екрана от 1100px и под ще използва стила в широкоекранен.css файл.

Файлът widescreen.css

/* У дома */
#navbar .container h1 a span{
дисплей: няма;
}
#home .home-content .text-3 span{
цвят: #000000;
}
/* Портфолио */
.проекти{
justify-content: център;
}
.проект{
гъвкавост: 0;
}
/* Относно */
.about-content{
flex-direction: колона;
}
/* Контакт */
.contact-content{
flex-direction: колона;
}

Кодът по-горе ще създаде адаптивно оформление на устройства с размери на екрана от 1100px и по-малко, както можете да видите в изхода по-долу:

Вторият CSS файл ще създаде структурата на оформлението за смартфони и таблети в портретен режим. Тя ще има максимална ширина от 760 пиксела, както можете да видите в следния маркер за връзка:

Файлът mobile.css

/* Navbar */
#navbar .container h1 a span{
дисплей: няма;
}
#navbar .container .menu{
margin-left: 0rem;
}
#ham-menu{
ширина: 35px;
височина: 30px;
поле: 30px 0 20px 20px;
курсор: показалец;
}
#navbar .container .menu-wrap .menu{
дисплей: няма;
}
.bar{
височина: 5px;
ширина: 100%;
цвят на фона: #ffffff;
дисплей: блок;
радиус на границата: 5px;
преход: 0,3s лекота;
}
#bar1{
transform: translateY(-4px);
}
#bar3{
трансформиране: translateY(4px);
}
/* У дома */
#У дома{
дисплей: гъвкав;
фон: url("/images/home.jpg") център без повторение;
височина: 100vh;
}
#home .container{
марж: 6rem 1rem 2rem 1rem;
подплата: 2rem;
}
#home .home-content .text-1{
размер на шрифта: 20px;
марж: 1.2rem;
}
#home .home-content .text-2{
размер на шрифта: 45px;
шрифт-тегло: 500;
марж: 1rem;
}
#home .home-content .text-3{
размер на шрифта: 22px;
марж: 1.2rem;
}
#home .home-content .text-3 span{
цвят: #0000ff;
шрифт-тегло: 600;
}
#home .container{
margin-left: 4.5rem;
}
/* Относно */
#about .container{
допълване: 0;
}
/* Контакт */
#contact .container{
допълване: 0;
}

Файлът по-горе ще създаде следното отзивчиво оформление на смартфона:

Други начини за създаване на отзивчиви интерактивни уебсайтове

Да знаете как да направите уебсайта си отзивчив и интерактивен с помощта на CSS и HTML е страхотно умение. Но това не са единствените методи да направите уебсайта си отзивчив и интерактивен.

Много предни рамки и дори шаблони за услуги като Joomla улесняват отзивчивите интерактивни дизайни.

15 стилни шаблона на Joomla за отзивчиви уебсайтове

Търсите да създадете уебсайт за вашия бизнес или блог? Изпробвайте тези шаблони на Joomla.

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

За автора