Efeitos com Animate CSS
29/05/2018Fala turma! Nesse tutorial aprenderemos como fazer animações simples utilizando o Animate.css. Aprenderemos a fazer animações com CSS puro e utilizando javascript.
Para tanto, o primeiro passo é baixar o Animate.css para a raiz do nosso sistema. Baixaremos também a biblioteca Zepto.js também.
Animações com CSS
Vamos construir primeiramente nosso arquivo HTML5 e linkar nossos arquivos externos CSS e javascript.
<!doctype html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Animate CSS</title>
<link rel="stylesheet" href="animate.min.css">
<link rel="stylesheet" href="style.min.css">
</head>
<body>
<div id="container">
Teste Animate CSS
</div>
</body>
<script src="zepto.min.js"></script>
<script src="javascript.min.js"></script>
</html>Posteriormente vamos adicionar as classes animated e a classe do nosso efeito através do javascript. O evento fica a seu critério, pode ser um clique, um keyup ou no caso um mouseover:
$('.container').on('mouseover',function(){
$(this).addClass('animated flash');
}).on('mouseout',function(){
$(this).removeClass('animated flash');
});Tal efeito também pode ser conseguido com javascript puro.
var object=document.getElementById('container');
object.onmouseover=function myFunction() {
var element, name, arr;
element = document.getElementById("container");
name = "animated bounce";
arr = element.className.split(" ");
if (arr.indexOf(name) == -1) {
element.className += " " + name;
}
}Por fim, cabe ressaltar que para fins de otimização do site, devemos minificar e retirar do arquivo animate.css todos os efeitos que não utilizaremos no projeto.
Posts Relacionados
