9.1 Animacje na hover (Hover Effects)
Animacje odgrywają ważną rolę w poprawie doświadczenia użytkownika (UX) na stronach internetowych. Mogą zwracać uwagę użytkownika, dostarczać feedback, ułatwiać nawigację oraz sprawiać, że interfejsy są bardziej intuicyjne i przyjemne w użyciu. Teraz przejrzymy przykłady wykorzystania animacji do poprawy UX.
Przykład: Animacja przycisku na hover
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animacja przycisku na hover</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>
Wyjaśnienie kodu:
.button: definiuje style dla przycisku, w tym płynne przejścia zmiany tła i skalowania na hover.button:hover: po najechaniu kursorem na przycisk kolor tła zmienia się, a przycisk nieco się powiększa
9.2 Animacje ładowania (Loading Animations)
Animacje ładowania informują użytkowników, że proces ładowania lub przetwarzania danych trwa, co pomaga zmniejszyć odczucie oczekiwania.
Przykład: Animacja ładowania
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animacja ładowania</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>
Wyjaśnienie kodu:
.spinner: definiuje styl dla spinnera, w tym granice i animację obrotu@keyframes spin: definiuje animację obrotu spinnera od 0 do 360 stopni
9.3 Animacje przejść stron (Page Transition Animations)
Animacje przejść między stronami lub sekcjami aplikacji pomagają użytkownikom się zorientować i sprawiają, że interakcja jest bardziej płynna.
Przykład: Animacja przejścia strony
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animacja przejścia strony</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>
Wyjaśnienie kodu:
.page: definiuje styl dla strony, w tym początkową przezroczystość i przesunięcie w dół.page.active: po dodaniu klasy active strona staje się całkowicie widoczna i powraca do pierwotnej pozycji- JavaScript: przy ładowaniu strony dodawana jest klasa
activedo elementu.page, inicjując animację
9.4 Animacje przy kliknięciu (Click Animations)
Animacje przy kliknięciu na elementy mogą poprawić feedback dla użytkowników i sprawić, że interakcja będzie bardziej angażująca.
Przykład: Animacja kliknięcia przycisku
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animacja kliknięcia przycisku</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>
Wyjaśnienie kodu:
.button: definiuje styl dla przycisku, w tym płynne przejście dla skalowania.button:active: po kliknięciu na przycisk element nieco się zmniejsza, tworząc efekt kliknięcia
GO TO FULL VERSION