Boteco Digital

Efeitos de animação com a lib Animate.css

Animate.css é uma biblioteca CSS de pequenas animações com vários efeitos interessante para dar destaques em elementos da nossa página. Você pode conferir os efeitos na própria página do projeto.

Vamos ao da biblioteca então, primeiramente devemos incluir a biblioteca no nossos head>o que pode ser feito direto pelo CDN:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">	

Baixando pelo bower:

bower install animate.css --save

ou ainda baixando direto do Git do projeto

Após a biblioteca estar carregada, para executar uma animação basta adicionar ao elemento desejado, via javascript, as classes “animated” e a correspondente ao efeito desejado.

Segue a lista de efeitos disponíveis(clique para visualizar o efeito):

bounce flash pulse rubberBand
shake headShake swing tada
wobble jello bounceIn bounceInDown
bounceInLeft bounceInRight bounceInUp bounceOut
bounceOutDown bounceOutLeft bounceOutRight bounceOutUp
fadeIn fadeInDown fadeInDownBig fadeInLeft
fadeInLeftBig fadeInRight fadeInRightBig fadeInUp
fadeInUpBig fadeOut fadeOutDown fadeOutDownBig
fadeOutLeft fadeOutLeftBig fadeOutRight fadeOutRightBig
fadeOutUp fadeOutUpBig flipInX flipInY
flipOutX flipOutY lightSpeedIn lightSpeedOut
rotateIn rotateInDownLeft rotateInDownRight rotateInUpLeft
rotateInUpRight rotateOut rotateOutDownLeft rotateOutDownRight
rotateOutUpLeft rotateOutUpRight hinge jackInTheBox
rollIn rollOut zoomIn zoomInDown
zoomInLeft zoomInRight zoomInUp zoomOut
zoomOutDown zoomOutLeft zoomOutRight zoomOutUp
slideInDown slideInLeft slideInRight slideInUp
slideOutDown slideOutLeft slideOutRight slideOutUp

Para adicionar as classes podemos utilizar javascript puro,

<h1>Exemplo de uso Animate.css</h1>

var h1 = document.querySelector('h1');
h1.addEventListener("click", function(){
	h1.classList.add('animated');
	h1.classList.add('bounce');
});

Veja um exemplo

ou também podemos utilizar a biblioteca jQuery:

$(document).ready(function(){				 
	$('h1').click(function(){
		$('h1').addClass('animated bounce');
	});				
});

A Animate.css é uma biblioteca muito fácil de utilizar, mas uma vez que a animação é realizada, deve-se remover e adicionar as classes novamente para que a animação se repita. Podemos fazer isto, removendo a classes de animação quando o evento de animação terminar.

$('h1').one('animationend', function(){
      $(this).removeClass();
});

No exemplo acima capturamos o evento gerado quando uma animação CSS termina(animationend) e removemos todas as classes do elemento selecionado.

Para obtermos uma melhor compatibilidade com os eventos de navegadores antigos, a própria página da biblioteca apresenta a solução de adicionar uma nova função no jQuery e chamar os efeitos através dela. Segue a baixo o código:

$.fn.extend({
  animateCss: function(animationName, callback) {
    var animationEnd = (function(el) {
      var animations = {
        animation: 'animationend',
        OAnimation: 'oAnimationEnd',
        MozAnimation: 'mozAnimationEnd',
        WebkitAnimation: 'webkitAnimationEnd',
      };

      for (var t in animations) {
        if (el.style[t] !== undefined) {
          return animations[t];
        }
      }
    })(document.createElement('div'));

    this.addClass('animated ' + animationName).one(animationEnd, function() {
      $(this).removeClass('animated ' + animationName);

      if (typeof callback === 'function') callback();
    });

    return this;
  },
});

Após ter carregado o código acima, de um arquivo externo por exemplo, podemos acionar a animação através da função animateCss:

$('#seuElemento').animateCss('bounce');

ou;

$('#seuElemento').animateCss('bounce', function() {
  // realizar algo depois da animação
});

Bom, era isso e boas animações!

Categorias CSS Web
comments powered by Disqus