Animação com CSS não é mais mistério. Se você quer enriquecer seu site sem usar o flash mas acha que isso é difícil, saiba que não é mais graças ao Daniel Eden.
A biblioteca do Animate.css deixa muito fácil a aplicação de animações em um site. Só de incluir umas classes você já vê resultado.
Com um pouquinho de código você já consegue fazer efeitos bem legais como um coração batendo por exemplo.
Demonstrações em tempo real
No site do animate.css há uma lista com todos os efeitos disponíveis na biblioteca. Se você selecionar um efeito da lista poderá clicar no botão “Animate it” e ver o efeito em ação (é bem legal!).
Animação css em 3 passos
Para começar faça o download do arquivo css e coloque na pasta de seu projeto.
Depois importe a folha de estilo para dentro da sua página.
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="utf-8">
<title>Teste de animação</title>
<link rel="stylesheet" href="css/animate.min.css">
<style>
body{padding-top:100px; text-align:center;}
</style>
</head>
<body>
<h1 class="animate bounce">Olá Mundo!</h1>
</body>
</html>Perceba as classes no elemento h1. A classe animate é padrão e a classe seguinte é a do efeito que você deseja (fadeIn por exemplo).
Se você tiver feito tudo certinho ao carregar a página você verá o texto “quicar” na tela.
Editando o efeito
Claro que só isso não traz muita graça. Para deixar tudo mais interessante será necessário editar um pouco o funcionamento do css. Felizmente isso é fácil de fazer.
Ao incluir uma id ou classe podemos sobrescrever alguns atributos do elemento que desejamos animar.
<style>
h1 {
animation-duration: 3s;
animation-delay: 1s;
animation-iteration-count: 1;
}
</style>A propriedade animation-duration controla o tempo que levará para a animação terminar. Aumente o valor e você terá uma animação lenta.
O animation-delay cria um retardo da animação quando o gatilho é disparado (o que no nosso exemplo é o próprio carregamento da página).
Por fim o animation-interation-count controla quantas vezes a animação irá ocorrer. É possível usar infinite para que ela fique em loop (eu usei isso no coração ali em cima).
Rodar animação ao rolar a página
Agora é que vem a parte boa! Graças a valorosa contribuição de Matt Aussaguel nós podemos fazer a animação rodar ao rolar a tela. E o melhor, de forma fácil e sem incorporar uma biblioteca jquery inteira só para isso. Caso queira uma demonstração em tempo real é só dar uma olhada aqui. Tem material explicativo em inglês nesse site também mas não vou deixar você na mão e já deixo aqui uma tradução em português ;D
Como usar o WOW
Não senhores ninguém aqui vai falar de World of Warcraft. É que a biblioteca que vamos usar tem esse nome. Vamos começar fazendo o download do script.
O conceito básico por trás dessa biblioteca é que você deve envolver o elemento que deseja animar por outro elemento com a classe wow e a classe da animação css que você deseja. Veja o exemplo.
<div class="wow bounceInUp">
<h2>texto animado</h2>
</div>Feita essa marcação você só precisa carregar o script e dar um comando para ligar ele.
<script src="wow.min.js"></script>
<script>
new WOW().init();
</script>Dando uma adaptada no exemplo que dei anteriormente eu inclui um pouco de css para jogar os elementos animados para fora da tela (para forçar o rolamento da página).
Com isso teremos o seguinte resultado:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="utf-8">
<title>Teste de animação 2.0</title>
<link rel="stylesheet" href="css/animate.min.css">
<style>
body{
padding-top:100px;
text-align:center;
}
.baloes{
margin:200px 20px 30px 20px;
padding:40px;
border-radius:80px;
color:white;
background:darkred;
}
</style>
</head>
<body>
<h1 class="animate bounce">Olá Mundo!</h1>
<div class="wow bounceInUp">
<h2 class="balao">bola 1</h2>
</div>
<div class="wow rollIn">
<h2 class="balao">bola 2</h2>
</div>
<div class="wow tada">
<h2 class="balao">bola 3</h2>
</div>
<script src="wow.min.js"></script>
<script>
new WOW().init();
</script>
</body>
</html>Considerações finais
Isso é apenas o básico que você pode fazer com a biblioteca de animação. Caso você tenha um bom conhecimento de Javascript/Jquery é possível fazer mágica de verdade. Em um vídeo do Daniel Eden ele explica como fazer uso do jquery em conjunto com o animate.css
Deixe um comentário Cancelar resposta