9.1 Animazioni al passaggio del mouse (Hover Effects)
Le animazioni giocano un ruolo importante nel migliorare l'esperienza utente (UX) sui siti web. Possono guidare l'attenzione dell'utente, fornire feedback, migliorare la navigazione e rendere le interfacce più intuitive e piacevoli da usare. Ora esamineremo esempi di utilizzo delle animazioni per migliorare l'UX.
Esempio: Animazione del pulsante al passaggio del mouse
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animazione pulsante al passaggio del mouse</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>
Spiegazione del codice:
.button: definisce gli stili per il pulsante, inclusi transizioni fluide per cambiare sfondo e scala al passaggio del mouse.button:hover: quando il cursore passa sopra, il colore di sfondo del pulsante cambia e aumenta leggermente
9.2 Animazioni di caricamento (Loading Animations)
Le animazioni di caricamento mostrano agli utenti che il processo di caricamento o elaborazione dei dati è in corso, aiutando a ridurre la sensazione di attesa.
Esempio: Animazione di caricamento
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animazione di caricamento</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>
Spiegazione del codice:
.spinner: definisce gli stili per lo spinner, inclusi bordi e animazione di rotazione@keyframes spin: definisce l'animazione di rotazione dello spinner da 0 a 360 gradi
9.3 Animazioni di transizione (Page Transition Animations)
Le animazioni di transizione tra pagine o sezioni di un'applicazione aiutano gli utenti a orientarsi e creano un'esperienza di interazione più fluida.
Esempio: Animazione di transizione della pagina
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animazione di transizione della pagina</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>
Spiegazione del codice:
.page: definisce gli stili per la pagina, inclusi opacità iniziale e spostamento verso il basso.page.active: quando viene aggiunta la classe active, la pagina diventa completamente visibile e torna alla posizione originale- JavaScript: al caricamento della pagina, viene aggiunta la classe
activeall'elemento.page, avviando l'animazione
9.4 Animazioni al clic (Click Animations)
Le animazioni al clic sugli elementi possono migliorare il feedback per gli utenti e rendere l'interazione più interessante.
Esempio: Animazione al clic su un pulsante
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animazione al clic su un pulsante</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>
Spiegazione del codice:
.button: definisce gli stili per il pulsante, incluso il passaggio fluido per la scala.button:active: quando si preme il pulsante, l'elemento si riduce leggermente, creando un effetto di pressione
GO TO FULL VERSION