9.1 Animationen bei Hover-Effekten
Animationen spielen eine wichtige Rolle bei der Verbesserung der Benutzererfahrung (UX) auf Websites. Sie können die Aufmerksamkeit der Nutzer lenken, Feedback geben, die Navigation verbessern und Schnittstellen intuitiver und angenehmer machen. Jetzt schauen wir uns Beispiele an, wie Animationen zur Verbesserung der UX eingesetzt werden können.
Beispiel: Button-Animation bei Hover
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Button-Animation bei 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>
Erläuterung des Codes:
.button: definiert Stile für den Button, einschließlich sanfter Übergänge für Hintergrund- und Skalierungsänderungen bei Hover.button:hover: beim Hovern ändert sich die Hintergrundfarbe des Buttons und er vergrößert sich leicht
9.2 Ladeanimationen
Ladeanimationen zeigen den Nutzern, dass der Lade- oder Datenverarbeitungsprozess läuft, was hilft, das Warten weniger lang erscheinen zu lassen.
Beispiel: Ladeanimation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ladeanimation</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>
Erläuterung des Codes:
.spinner: definiert Stile für den Spinner, einschließlich Umrandungen und die Drehanimation@keyframes spin: definiert die Drehanimation des Spinners von 0 bis 360 Grad
9.3 Seitenübergangsanimationen
Übergangsanimationen zwischen Seiten oder Abschnitten einer Anwendung helfen den Nutzern, sich zu orientieren und sorgen für eine sanftere Interaktionserfahrung.
Beispiel: Seitenübergangsanimation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Seitenübergangsanimation</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>
Erläuterung des Codes:
.page: definiert Stile für die Seite, einschließlich anfänglicher Transparenz und Verschiebung nach unten.page.active: beim Hinzufügen der Klasse active wird die Seite vollständig sichtbar und kehrt in ihre Ausgangsposition zurück- JavaScript: beim Laden der Seite wird die Klasse
activezum Element.pagehinzugefügt, um die Animation zu starten
9.4 Klick-Animationen
Animationen beim Klicken auf Elemente können das Feedback für die Nutzer verbessern und die Interaktion spannender machen.
Beispiel: Klick-Animation für Button
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Klick-Animation für Button</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>
Erläuterung des Codes:
.button: definiert Stile für den Button, einschließlich eines sanften Übergangs für die Skalierung.button:active: beim Klicken auf den Button verkleinert sich das Element leicht und erzeugt einen Klick-Effekt
GO TO FULL VERSION