Animação de elementos com CSS e Javascript

5 min de leitura

•

19/07/2023

Introdução🌟

As animações são ferramentas poderosas que podem ser utilizadas para destacar elementos importantes, mostrar transições suaves entre estados ou simplesmente criar uma atmosfera mais envolvente. Neste artigo, exploraremos como criar animações, desde as mais simples até as mais complexas, usando CSS e Javascript.

A importância do uso de animações

Animações desempenham um papel crucial no design e na experiência do usuário em sites e aplicativos. Quando aplicadas corretamente, podem transformar significativamente a maneira como os usuários interagem e percebem o conteúdo..

Mão na massa🛠️

Passo 1: Preparar o HTML

Primeiro, vamos criar a estrutura básica do HTML. Neste exemplo, teremos um botão que, ao ser clicado, animará um quadrado na página.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Animação de elementos com CSS e JavaScript</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <button id="animateButton">Animar quadrado</button>
    <div id="square" class="square"></div>
  </div>
  <script src="script.js"></script>
</body>
</html>

Passo 2: Estilizar o CSS

Agora, vamos criar o arquivo styles.css para estilizar nossos elementos. Vamos dar um tamanho e cor para o quadrado e posicionar o botão e o quadrado no centro da página.

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

.container {
  text-align: center;
}

.square {
  width: 100px;
  height: 100px;
  background-color: blue;
  margin-top: 20px;
}

Passo 3: Adicionar animação com CSS

Antes de introduzirmos a interatividade com JavaScript, vamos estabelecer uma animação simples usando apenas CSS. Adicionaremos uma classe chamada animated, que permitirá que o quadrado cresça e mude de cor.

.animated {
  animation: growAndChangeColor 2s linear forwards;
}

@keyframes growAndChangeColor {
  0% {
    width: 100px;
    height: 100px;
    background-color: blue;
  }
  100% {
    width: 200px;
    height: 200px;
    background-color: red;
  }
}

Passo 4: Adicionar interatividade com JavaScript

Finalizaremos nosso exemplo adicionando interatividade com JavaScript. No arquivo script.js, um event listener será associado ao botão. Assim, quando o botão for pressionado, a classe animated será aplicada ao quadrado, ativando a animação.

const animateButton = document.getElementById('animateButton');
const square = document.getElementById('square');

animateButton.addEventListener('click', () => {
  square.classList.toggle('animated');
});

Revisão👁

Através deste tutorial, desenvolvemos uma animação interativa em que um quadrado na página se expande e muda de cor ao pressionar um botão. Resumidamente, o processo foi dividido em quatro etapas principais::

Preparar o HTML: Criamos a estrutura básica do HTML, incluindo o botão que dispara a animação e o elemento do quadrado que será animado.
Estilizar o CSS: Estilizamos os elementos usando CSS para posicioná-los na página e definir a aparência do quadrado (tamanho e cor). Além disso, criamos uma classe chamada animated, que define a animação em si, utilizando a regra @keyframes para especificar os estados inicial e final da animação.
Adicionar animação com CSS: Aplicamos a animação CSS ao quadrado através da classe animated. Essa classe será adicionada e removida do elemento quadrado usando JavaScript para controlar a execução da animação.
Adicionar interatividade com JavaScript: Finalmente, adicionamos um event listener ao botão usando JavaScript. Quando o botão é clicado, a classe animated é adicionada (ou removida) do elemento quadrado, fazendo com que a animação seja executada (ou revertida).

Conclusão👏

Parabéns por seguir até o fim! Com os conhecimentos adquiridos, você agora está apto a criar animações utilizando CSS e JavaScript. Incorporar animações pode aprimorar significativamente a experiência do usuário, tornando seu site ou aplicativo mais engajador e dinâmico. Recomendo que explore mais propriedades e técnicas de animação. Existem muitos recursos disponíveis, incluindo tutoriais no YouTube, que podem ajudá-lo a criar efeitos ainda mais sofisticados e personalizados.

Lucas Matheus

Sou uma pessoa apaixonada no impacto e em ensinar pessoas. Criei a Firstday com o objetivo de impactar vidas e ensinar pessoas a se tornarem desenvolvedores web experientes por meio da prática. Oferecemos uma formação completa em tecnologias de front-end, com projetos desafiadores e mentoria personalizada para ajudar nossos alunos a se destacarem no mercado de trabalho.