9.1 Hoạt ảnh khi di chuột (Hover Effects)
Hoạt ảnh đóng vai trò quan trọng trong việc cải thiện trải nghiệm người dùng (UX) trên các trang web. Chúng có thể hướng dẫn sự chú ý của người dùng, cung cấp phản hồi, cải thiện điều hướng và làm cho giao diện dễ hiểu và dễ sử dụng. Bây giờ chúng ta sẽ xem xét các ví dụ về sử dụng hoạt ảnh để cải thiện UX.
Ví dụ: Hoạt ảnh nút khi di chuột
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hoạt ảnh nút khi di chuột</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">Hover me</button>
</body>
</html>
Giải thích mã:
.button: định nghĩa kiểu dáng cho nút, bao gồm các chuyển đổi mượt mà để thay đổi nền và tỷ lệ khi di chuột.button:hover: khi di chuột, màu nền của nút thay đổi và nó phóng to một chút
9.2 Hoạt ảnh tải (Loading Animations)
Hoạt ảnh tải cho người dùng biết rằng quá trình tải hoặc xử lý dữ liệu đang diễn ra, giúp giảm cảm giác chờ đợi.
Ví dụ: Hoạt ảnh tải
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hoạt ảnh tải</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>
Giải thích mã:
.spinner: định nghĩa kiểu dáng cho spinner, bao gồm các đường viền và hoạt ảnh xoay@keyframes spin: định nghĩa hoạt ảnh xoay của spinner từ 0 đến 360 độ
9.3 Hoạt ảnh chuyển trang (Page Transition Animations)
Hoạt ảnh chuyển trang giữa các trang hoặc các phần của ứng dụng giúp người dùng định hướng và tạo ra trải nghiệm tương tác mượt mà hơn.
Ví dụ: Hoạt ảnh chuyển trang
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hoạt ảnh chuyển trang</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">Content of the page</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
document.querySelector('.page').classList.add('active');
});
</script>
</body>
</html>
Giải thích mã:
.page: định nghĩa kiểu dáng cho trang, bao gồm độ mờ và dịch chuyển xuống ban đầu.page.active: khi thêm class active, trang trở nên hoàn toàn hiển thị và trở lại vị trí ban đầu- JavaScript: khi trang tải hoàn tất, class
activeđược thêm vào phần tử.page, khởi động hoạt ảnh
9.4 Hoạt ảnh khi nhấn (Click Animations)
Hoạt ảnh khi nhấn vào các phần tử có thể cải thiện phản hồi cho người dùng và làm cho tương tác thú vị hơn.
Ví dụ: Hoạt ảnh khi nhấn nút
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hoạt ảnh khi nhấn nút</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">Click me</button>
</body>
</html>
Giải thích mã:
.button: định nghĩa kiểu dáng cho nút, bao gồm chuyển đổi mượt mà cho tỷ lệ.button:active: khi nhấn vào nút, phần tử bị thu nhỏ một chút, tạo hiệu ứng nhấn
GO TO FULL VERSION