Incríveis Animações com CSS

Esta postagem é baseada na página Justinaguilar. Com este plugin CSS, você poderá animar suas páginas de forma profissional e encantadora. Vale a pena conferir.

A forma de utilizar é muito simples, basta adicionar o arquivo css animation e inserir a classe ao objeto que deve ser animado, exemplo:

Inserção do CSS das animações:

<link rel="stylesheet" href="css/animations.css">

Adicionando classe ao objeto que será animado:

<div id="object" class="slideUp">

Abaixo você pode conferir o resultado das animações, clique nos links para ver os diversos efeitos:

CSS:

Javascript:

Html:

Para fazer com que a animação seja ativada quando o usuário ver o item, você deve colocar este código em Javascript e css, sendo que, deve ser carregado o Jquery antes:

CSS:

#object{
 background-color: #fe5652;
 visibility: hidden;
}

JS:

<script>
 $(window).scroll(function() {
  $('#animatedElement').each(function(){
  var imagePos = $(this).offset().top;

  var topOfWindow = $(window).scrollTop();
   if (imagePos < topOfWindow+400) {
    $(this).addClass("slideUp");
   }
  });
 });
</script>

Para ver o exemplo, acessem este LINK.

Esperamos que tenham gostado e aprendido, dúvidas e sugestões deixem nos comentários, isto incentiva-nos a sempre compartilhar conhecimento cada vez mais!