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!