Criando Animações Básicas com JavaScript
Aprenda a criar animações simples, como mover um elemento pela tela, mudar cores ou tamanhos, usando JavaScript e CSS.
Criando Animações Básicas com JavaScript
Animações podem transformar uma página web simples em algo interativo e envolvente. Usar JavaScript e CSS para criar animações básicas é uma excelente maneira de melhorar a experiência do usuário em seu site. Neste post, vamos explorar como você pode criar animações simples, como mover um elemento pela tela, mudar suas cores ou tamanhos.
Movendo um Elemento pela Tela
Vamos começar com um exemplo simples de como mover um elemento pela tela usando JavaScript.
HTML
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animações com JavaScript</title>
<style>
#caixa {
width: 50px;
height: 50px;
background-color: red;
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div id="caixa"></div>
<button onclick="moverCaixa()">Mover Caixa</button>
<script src="script.js"></script>
</body>
</html>
JavaScript
function moverCaixa() {
let caixa = document.getElementById('caixa');
let posicao = 0;
let id = setInterval(frame, 5);
function frame() {
if (posicao == 350) {
clearInterval(id);
} else {
posicao++;
caixa.style.top = posicao + 'px';
caixa.style.left = posicao + 'px';
}
}
}
Mudando Cores
Agora, vamos ver como mudar a cor de um elemento gradualmente usando JavaScript.
HTML
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animações com JavaScript</title>
<style>
#caixa {
width: 50px;
height: 50px;
background-color: red;
}
</style>
</head>
<body>
<div id="caixa"></div>
<button onclick="mudarCor()">Mudar Cor</button>
<script src="script.js"></script>
</body>
</html>
JavaScript
function mudarCor() {
let caixa = document.getElementById('caixa');
let corAtual = 0;
let id = setInterval(frame, 50);
function frame() {
if (corAtual >= 255) {
clearInterval(id);
} else {
corAtual++;
caixa.style.backgroundColor = `rgb(${corAtual}, 0, 0)`;
}
}
}
Mudando Tamanhos
Finalmente, vamos criar uma animação que aumenta o tamanho de um elemento.
HTML
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animações com JavaScript</title>
<style>
#caixa {
width: 50px;
height: 50px;
background-color: red;
}
</style>
</head>
<body>
<div id="caixa"></div>
<button onclick="aumentarTamanho()">Aumentar Tamanho</button>
<script src="script.js"></script>
</body>
</html>
JavaScript
function aumentarTamanho() {
let caixa = document.getElementById('caixa');
let tamanhoAtual = 50;
let id = setInterval(frame, 10);
function frame() {
if (tamanhoAtual == 200) {
clearInterval(id);
} else {
tamanhoAtual++;
caixa.style.width = tamanhoAtual + 'px';
caixa.style.height = tamanhoAtual + 'px';
}
}
}
Combinando JavaScript e CSS para Animações
Usar JavaScript para manipular propriedades de CSS é uma maneira poderosa de criar animações, mas você também pode combinar JavaScript com CSS para obter resultados ainda mais fluídos.
HTML
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animações com JavaScript e CSS</title>
<style>
#caixa {
width: 50px;
height: 50px;
background-color: red;
transition: all 0.5s ease;
}
.mover {
transform: translateX(300px);
}
.mudar-cor {
background-color: blue;
}
.aumentar-tamanho {
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div id="caixa"></div>
<button onclick="mover()">Mover</button>
<button onclick="mudarCor()">Mudar Cor</button>
<button onclick="aumentarTamanho()">Aumentar Tamanho</button>
<script src="script.js"></script>
</body>
</html>
JavaScript
function mover() {
document.getElementById('caixa').classList.toggle('mover');
}
function mudarCor() {
document.getElementById('caixa').classList.toggle('mudar-cor');
}
function aumentarTamanho() {
document.getElementById('caixa').classList.toggle('aumentar-tamanho');
}
Conclusão
Criar animações básicas com JavaScript pode ser uma maneira divertida e eficaz de adicionar interatividade ao seu site. Seja movendo elementos, mudando suas cores ou tamanhos, as animações podem tornar a experiência do usuário mais dinâmica e envolvente. Experimente as técnicas mostradas neste post e explore as possibilidades que JavaScript e CSS oferecem para criar animações incríveis.
💡 Gostou do conteúdo?
✅ Apoie-nos: Siga, Curta, Comente e Compartilhe!
📲 Conecte-se com a WebMundi:
▶️ YouTube
▶️ Facebook
▶️ Instagram
▶️ LinkedIn
▶️ TikTok
👥 Participe do nosso Discord para tirar dúvidas e ajudar outras pessoas!
