9.1 Hover Effectslər
Animasiyalar veb-saytlarda istifadəçi təcrübəsini (UX) yaxşılaşdırmaqda böyük rol oynayır. Onlar istifadəçinin diqqətini yönəltməyə kömək edir, feedback verir, naviqasiyanı yaxşılaşdırır və interfeysləri istifadəyə daha intuitiv və xoş hala gətirir. İndi UX-i yaxşılaşdırmaq üçün animasiyaların istifadəsinə dair nümunələrə baxaq.
Nümunə: Hover zamanı düymə animasiyası
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hover zamanı düymə animasiyası</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 mənim üzərimdə</button>
</body>
</html>
Kodun izahı:
.button: düymənin stilini müəyyən edir, hover zamanı fon rəngini və ölçüsünü dəyişmək üçün hamar keçidləri əlavə edir.button:hover: kursor düymənin üzərinə gəldikdə, düymənin fon rəngi dəyişir və düymə bir az böyüyür
9.2 Yükləmə Animasiyaları (Loading Animations)
Yükləmə animasiyaları istifadəçilərə məlumatların yüklənməsi və ya işlənməsi prosesinin davam etdiyini göstərir, bu da gözləmə hissini azaltmağa kömək edir.
Nümunə: Yükləmə animasiyası
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Yükləmə Animasiyası</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>
Kodun izahı:
.spinner: spiner üçün sərhədləri və dönmə animasiyasını daxil edən tərzləri təyin edir@keyframes spin: spinerin 0-dan 360 dərəcəyə qədər dönmə animasiyasını təyin edir
9.3 Keçid animasiyaları (Page Transition Animations)
Səhifələr və ya tətbiqin bölmələri arasında keçid animasiyaları istifadəçilərə daha asan istiqamətlənməyə kömək edir və daha hamar bir istifadəçi təcrübəsi yaradır.
Misal: Səhifə keçid animasiyası
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Səhifə keçid animasiyası</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">Səhifənin məzmunu</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
document.querySelector('.page').classList.add('active');
});
</script>
</body>
</html>
Kod izahı:
.page: səhifə üçün başlanğıc qeyri-şəffaflıq və aşağıya keçid daxil olmaqla stilləri təyin edir.page.active: active classı əlavə olunduqda səhifə tam görünən olur və ilkin vəziyyətinə qayıdır- JavaScript: səhifə yüklənəndə
activeclassı.pageelementinə əlavə olunur, animasiyanı başladır
9.4 Klik animasiyaları (Click Animations)
Elementlərə klik edərkən animasiyalar istifadəçilər üçün geri dönüşü yaxşılaşdırır və qarşılıqlı əlaqəni daha əyləncəli edir.
Nümunə: Düyməyə klik animasiyası
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Düyməyə klik animasiyası</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>
Kodun izahı:
.button: düymənin üslublarını müəyyən edir, miqyas üçün Smooth Transition əlavə edir.button:active: düyməyə klik olunarkən element bir az kiçilir, bu da klik effektini yaradır
GO TO FULL VERSION