9.1 Animations au survol (Hover Effects)
Les animations jouent un rôle important pour améliorer l'expérience utilisateur (UX) sur les sites web. Elles peuvent attirer l'attention de l'utilisateur, fournir un retour, améliorer la navigation et rendre les interfaces plus intuitives et agréables à utiliser. Voyons maintenant quelques exemples d'utilisation des animations pour enrichir l'UX.
Exemple : Animation d'un bouton au survol
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animation d'un bouton au survol</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>
Explication du code :
.button: définit les styles du bouton, incluant les transitions fluides pour les changements de couleur et de taille au survol.button:hover: au survol, la couleur d'arrière-plan change et le bouton augmente légèrement
9.2 Animations de chargement (Loading Animations)
Les animations de chargement montrent aux utilisateurs que le processus de chargement ou de traitement des données est en cours, ce qui aide à réduire la sensation d'attente.
Exemple : Animation de chargement
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animation de chargement</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>
Explication du code :
.spinner: définit les styles pour le spinner, incluant les bordures et l'animation de rotation@keyframes spin: définit l'animation de rotation du spinner de 0 à 360 degrés
9.3 Animations de transition de page (Page Transition Animations)
Les animations de transition entre les pages ou sections d'une application aident les utilisateurs à s'orienter et offrent une expérience d'interaction plus fluide.
Exemple : Animation de transition de page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animation de transition de page</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>
Explication du code :
.page: définit les styles pour la page, incluant une opacité initiale faible et un décalage vers le bas.page.active: lorsqu'on ajoute la classe active, la page devient pleinement visible et revient à sa position initiale- JavaScript : lors du chargement de la page, la classe
activeest ajoutée à l'élément.page, déclenchant l'animation
9.4 Animations de clic (Click Animations)
Les animations lors du clic sur des éléments peuvent améliorer le retour pour les utilisateurs et rendre l'interaction plus intéressante.
Exemple : Animation lors du clic sur un bouton
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animation lors du clic sur un bouton</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>
Explication du code :
.button: définit les styles pour le bouton, incluant une transition fluide de taille.button:active: lorsqu'on clique, le bouton est légèrement réduit, créant un effet de pression
GO TO FULL VERSION