9.1 Анімації при наведенні (Hover Effects)
Анімації відіграють важливу роль у покращенні користувацького досвіду (UX) на вебсайтах. Вони можуть спрямовувати увагу користувача, забезпечувати зворотній зв'язок, покращувати навігацію та робити інтерфейси більш інтуїтивно зрозумілими та приємними у використанні. Тепер ми розглянемо приклади використання анімацій для покращення UX.
Приклад: Анімація кнопки при наведенні
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Анімація кнопки при наведенні</title>
<style>
.button {
padding: 10px 20px;
background-color: #3498db;
color: white;
border: none;
cursor: pointer;
transition: background-color 0.3s ease, transform 0.3s ease;
}
.button:hover {
background-color: #2980b9;
transform: scale(1.1);
}
</style>
</head>
<body>
<button class="button">Наведи на мене</button>
</body>
</html>
Пояснення коду:
.button: визначає стилі для кнопки, включаючи плавні переходи для зміни фону та масштабу при наведенні.button:hover: при наведенні курсора колір фону кнопки змінюється, і вона трохи збільшується
9.2 Анімації завантаження (Loading Animations)
Анімації завантаження показують користувачам, що процес завантаження або обробки даних триває, що допомагає зменшити відчуття очікування.
Приклад: Анімація завантаження
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Анімація завантаження</title>
<style>
.spinner {
width: 50px;
height: 50px;
border: 5px solid #f3f3f3;
border-top: 5px solid #3498db;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="spinner"></div>
</body>
</html>
Пояснення коду:
.spinner: визначає стилі для спіннера, включаючи межі та анімацію обертання@keyframes spin: визначає анімацію обертання спіннера від 0 до 360 градусів
9.3 Анімації переходів (Page Transition Animations)
Анімації переходів між сторінками або розділами застосунку допомагають користувачам орієнтуватися та створюють більш плавний досвід взаємодії.
Приклад: Анімація переходу сторінки
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Анімація переходу сторінки</title>
<style>
.page {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.5s ease, transform 0.5s ease;
}
.page.active {
opacity: 1;
transform: translateY(0);
}
</style>
</head>
<body>
<div class="page">Контент сторінки</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
document.querySelector('.page').classList.add('active');
});
</script>
</body>
</html>
Пояснення коду:
.page: визначає стилі для сторінки, включаючи початкову непрозорість та зміщення вниз.page.active: при додаванні класу active сторінка стає повністю видимою і повертається в початкове положення- JavaScript: при завантаженні сторінки додається клас
activeдо елемента.page, ініціюючи анімацію
9.4 Анімації натиснення (Click Animations)
Анімації при натисканні на елементи можуть покращити зворотній зв'язок для користувачів і зробити взаємодію цікавішою.
Приклад: Анімація натиснення на кнопку
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Анімація натиснення на кнопку</title>
<style>
.button {
padding: 10px 20px;
background-color: #e74c3c;
color: white;
border: none;
cursor: pointer;
transition: transform 0.1s ease;
}
.button:active {
transform: scale(0.95);
}
</style>
</head>
<body>
<button class="button">Натисни на мене</button>
</body>
</html>
Пояснення коду:
.button: визначає стилі для кнопки, включаючи плавний перехід для масштабу.button:active: при натисканні на кнопку елемент трохи зменшується, створюючи ефект натискання
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ