9.1 Animações ao passar o mouse (Hover Effects)
As animações desempenham um papel importante na melhoria da experiência do usuário (UX) em sites. Elas podem direcionar a atenção do usuário, fornecer feedback, melhorar a navegação e tornar as interfaces mais intuitivas e agradáveis de usar. Agora vamos ver exemplos de como usar animações para melhorar o UX.
Exemplo: Animação de botão ao passar o mouse
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animação de botão ao passar o 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>
Explicação do código:
.button: define os estilos para o botão, incluindo transições suaves para alteração de fundo e escala ao passar o mouse.button:hover: ao passar o cursor, a cor de fundo do botão muda e ele aumenta um pouco de tamanho
9.2 Animações de carregamento (Loading Animations)
Animações de carregamento mostram aos usuários que o processo de carregamento ou processamento de dados está em andamento, o que ajuda a diminuir a sensação de espera.
Exemplo: Animação de carregamento
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animação de carregamento</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>
Explicação do código:
.spinner: define os estilos para o spinner, incluindo bordas e animação de rotação@keyframes spin: define a animação de rotação do spinner de 0 a 360 graus
9.3 Animações de transição de página (Page Transition Animations)
Animações de transição entre páginas ou seções de um aplicativo ajudam os usuários a se orientar e criam uma experiência de interação mais suave.
Exemplo: Animação de transição 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>Animação de transição 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>
Explicação do código:
.page: define os estilos para a página, incluindo opacidade inicial e deslocamento para baixo.page.active: ao adicionar a classe active, a página se torna totalmente visível e retorna à posição inicial- JavaScript: ao carregar a página, o script adiciona a classe
activeao elemento.page, iniciando a animação
9.4 Animações de clique (Click Animations)
Animações ao clicar em elementos podem melhorar o feedback para os usuários e tornar a interação mais divertida.
Exemplo: Animação de clique no botão
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animação de clique no botão</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>
Explicação do código:
.button: define os estilos para o botão, incluindo transição suave para escala.button:active: ao clicar no botão, o elemento diminui um pouco, criando um efeito de pressão
GO TO FULL VERSION