Как сделать ваш сайт адаптивным и интерактивным с помощью CSS и JavaScript

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

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

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

Сделайте ваш сайт интерактивным

Когда вы создаете веб-сайт, вы начинаете сверху вниз. Поэтому создание интерактивного веб-сайта - это процесс, который также следует начинать сверху. Брать это портфолио веб-сайт мы построили в качестве примера. У него чистый дизайн, но он не полностью интерактивен.

Каждый пункт меню меняет цвет при наведении на него курсора, но как узнать, в каком разделе веб-сайта вы находитесь? Что ж, есть два способа сделать это - активировать пункты меню с помощью прокрутка и по щелчку Мероприятия.

Активация пункта меню каждый раз, когда вы прокручиваете веб-сайт вверх или вниз, потребует использования функции JavaScript, которую вы можете вызвать «activeMenu». Для этой функции потребуется доступ к пунктам меню на панели навигации, а также к каждому разделу веб-сайта. К счастью, это можно сделать с помощью querySelectorAll Селектор DOM.

В каталоге проекта вам нужно будет создать новый файл JavaScript и связать его с файлом HTML, используя следующую строку кода:

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

Файл main.js

// использование javascript для активации пункта меню при прокрутке
const li = document.querySelectorAll (". ссылки");
const sec = document.querySelectorAll («раздел»);
function activeMenu () {
пусть len = длина секунды;
while (- len && window.scrollY + 97 li.forEach (ltx => ltx.classList.remove ("активный"));
li [len] .classList.add ("активный");
}
activeMenu ();
window.addEventListener («прокрутка», activeMenu);

В querySelectorAll селектор в приведенном выше коде захватывает все элементы меню с помощью ссылки класс. Он также захватывает все разделы веб-сайта с помощью раздел тег. В activateMenu Затем функция берет длину каждого раздела и удаляет или добавляет «активную» переменную в зависимости от позиции прокрутки пользователя.

Чтобы приведенный выше код работал, вам необходимо обновить таблицу стилей веб-сайта портфолио, включив в раздел панели навигации следующий код:

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

Активация пунктов меню по щелчку

 // использование jquery для активации пункта меню onclick
$ (документ) .on ('щелчок', 'li', function () {
$ (это) .addClass ('активный'). siblings (). removeClass ('активный')
})

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

Проблема, с которой вы можете столкнуться при активации каждого пункта меню по щелчку, заключается в том, что панель навигации будет закрывать верхнюю часть каждого раздела. Чтобы предотвратить это, вы можете просто вставить следующий код в служебный раздел таблицы стилей:

раздел{
верхняя граница прокрутки: 4,5 бэр;
}

Приведенный выше код гарантирует, что при переходе к каждому разделу, щелкнув по нему, панель навигации останется на 4,5 бара над каждым разделом (или 72 пикселя). Еще одна интересная функция, которую можно добавить на свой сайт, - это плавная прокрутка, что можно сделать с помощью следующего кода CSS:

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

Сделайте вашу домашнюю страницу интерактивной

На большинстве веб-сайтов пользователь увидит свою первую кнопку на панели навигации или на домашней странице. Кнопка должна быть не только призывом к действию, но и интерактивной. Отличный способ добиться этого - использовать CSS. : hover селектор, который присваивает новое состояние элементу каждый раз, когда пользователь наводит на него указатель мыши.

На веб-сайте портфолио единственная ссылка на главной странице имеет кстати класс (что придает ему вид кнопки). Итак, чтобы сделать эту кнопку интерактивной, вы можете просто назначить : hover селектор на кстати класс.

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

 .btn: hover {
фон: #fff;
цвет синий;
граница: синяя сплошная;
радиус границы: 5 пикселей;
}

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

Еще одна интересная функция для домашней страницы - это анимация набора текста, в которой используется typed.js (сценарий анимации набора текста jQuery).

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

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

После добавления приведенного выше кода в файл JavaScript вам потребуется внести следующие изменения в HTML:

И я 

В приведенном выше коде вы заменяете текст «Разработчик программного обеспечения» в исходном коде на класс «набора текста», создавая анимацию набора текста.

Как сделать другие разделы вашего веб-сайта интерактивными

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

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

.img-container img {
максимальная ширина: 450 пикселей;
переход: все замедление 0,3 с;
курсор: указатель;
}
.img-container img: hover {
преобразовать: масштаб (1.2);
}

Как сделать ваш сайт адаптивным

При создании адаптивного веб-сайта необходимо учитывать четыре различных типа устройств: настольные компьютеры, ноутбуки, планшеты и смартфоны. Кроме того, у каждого из этих типов устройств также есть ряд разных размеров экрана, но эти четыре категории - хорошее место для начала.

Связанный: Как использовать медиа-запросы в HTML и CSS для создания адаптивных сайтов

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

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

Вам потребуется создать два дополнительных файла CSS. Первый файл CSS создаст структуру макета для небольших ноутбуков и планшетов в ландшафтном режиме. Его максимальная ширина будет 1100 пикселей, как вы видите в следующем теге ссылки:

Вставив строку кода выше в голова тег вашего HTML-файла (или в данном случае файла веб-сайта портфолио) гарантирует, что каждое устройство с шириной экрана 1100 пикселей и под будет использовать стиль в widescreen.css файл.

Файл widescreen.css

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

Приведенный выше код создаст адаптивный макет на устройствах с размером экрана 1100 пикселей и меньше, как вы можете видеть в выходных данных ниже:

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

Файл mobile.css

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

Приведенный выше файл создаст следующий адаптивный макет смартфона:

Другие способы создания адаптивных интерактивных веб-сайтов

Знание того, как сделать ваш сайт адаптивным и интерактивным с помощью CSS и HTML, - это отличный навык. Но это не единственные способы сделать ваш сайт отзывчивым и интерактивным.

Многие интерфейсные фреймворки и даже шаблоны в таких сервисах, как Joomla, обеспечивают адаптивный интерактивный дизайн.

15 стильных шаблонов Joomla для адаптивных сайтов

Хотите создать сайт для своего бизнеса или блога? Попробуйте эти шаблоны Joomla.

Читать далее

Об авторе