9.1 Efectos de animación al pasar el ratón (Hover Effects)
Las animaciones juegan un papel importante en la mejora de la experiencia del usuario (UX) en sitios web. Pueden dirigir la atención del usuario, proporcionar retroalimentación, mejorar la navegación y hacer que las interfaces sean más intuitivas y agradables para usar. Ahora veremos ejemplos de cómo usar animaciones para mejorar el UX.
Ejemplo: Animación de botón al pasar el ratón
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animación de botón al pasar el ratón</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>
Explicación del código:
.button: define estilos para el botón, incluyendo transiciones suaves para cambiar el fondo y la escala al pasar el ratón.button:hover: al pasar el ratón, el color del fondo del botón cambia y se agranda un poco
9.2 Animaciones de carga (Loading Animations)
Las animaciones de carga muestran a los usuarios que el proceso de carga o procesamiento de datos está en curso, lo que ayuda a reducir la sensación de espera.
Ejemplo: Animación de carga
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animación de carga</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>
Explicación del código:
.spinner: define estilos para el spinner, incluyendo bordes y animación de rotación@keyframes spin: define la animación de rotación del spinner de 0 a 360 grados
9.3 Animaciones de transición de página (Page Transition Animations)
Las animaciones de transición entre páginas o secciones de una app ayudan a los usuarios a orientarse y crean una experiencia de interacción más fluida.
Ejemplo: Animación de transición de página
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animación de transición de página</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>
Explicación del código:
.page: define estilos para la página, incluyendo opacidad inicial y desplazamiento hacia abajo.page.active: al añadir la clase active, la página se vuelve completamente visible y vuelve a su posición inicial- JavaScript: al cargar la página, se añade la clase
activeal elemento.page, iniciando la animación
9.4 Animaciones al hacer clic (Click Animations)
Las animaciones al hacer clic en elementos pueden mejorar la retroalimentación para los usuarios y hacer que la interacción sea más divertida.
Ejemplo: Animación al hacer clic en un botón
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animación al hacer clic en un botón</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>
Explicación del código:
.button: define estilos para el botón, incluyendo transición suave para la escala.button:active: al hacer clic en el botón, el elemento se reduce un poco, creando un efecto de clic
GO TO FULL VERSION