Criar animações para nossos websites era algo “impensável” no passado. Com o surgimento do CSS3 e a morte do flash, a criação de websites dinâmicos, animados e leves, foi ficando cada vez mais fácil. Quem diria que há 7 anos atrás poderíamos alterar nossas animações para web sem precisar ter o flash instalado na nossa máquina ou até mesmo criar sites com efeitos paralax? Os devs antigos sabem bem o que estou querendo dizer.
Assim como o HTML5, o CSS3 também veio com várias novidades interessantes e revolucionárias… Entre elas temos a propriedade animation. Com esta riquíssima propriedade, podemos produzir transições apenas com CSS. Mas isso você já sabe. Mesmo assim, a propriedade animation e também o método keyframe podem ser ruins de gerenciar quando temos muita animação em um mesmo site. Ai, se houver um framework que ajude esse trabalho, nossa vida se torna mais fácil. É aí que entra o All Animation CSS3.
O framework All Animation CSS3
Bastante empolgado com estas riquíssimas possibilidades que a propriedade animation nos oferece, eu e o Jeftar Mascarenhas resolvemos criar um framework de animações css3, que graças a Deus está dando “alguns acessos”, e hoje irei compartilhar com meus amigos “dev’s ninjas”. Seu nome é o All Animation CSS3.
“All …” oquê?
O nome soa meio irônico pois All Animation CSS3 (todas as animações css3) nada mais é que um framework que reúne ricas animações CSS3 para você utilizar no seu projeto acadêmico ou comercial. Contém um conjunto de animações, divertidas para deixar seu projeto mais sexy. São animações cross-browser que darão mais ênfase a suas páginas como controles deslizantes, efeitos 3D’s e etc…
Quando usar?
Como qualquer framework, seu objetivo é agilizar o processo de criação no seu dia-a-dia. Se você assumiu um projeto grande, cujo o período de tempo é muito curto e com certeza, não teria tempo pra desenvolver animações interessantes… utilizar este framework seria ótimo para ganhar uns “timers” a mais.
Quando não usar?
Como citei acima, o All Animation é muito bom para quem está com uma carga de trabalho muito alta e um curto período de tempo pra desenvolver, mas se você tem um tempo extra para desenvolver seus projetos, então pode ficar à vontade para criar suas animações na mão.
“Muito bem, eu quero utilizar nos meus projetos”
Por onde começar:
É fácil integrar o framework no nosso projeto 😀 , veremos passo a passo como ultilizá-lo.
Passo 1, inclua os arquivos necessários no head, para que suas animações funcionem corretamente:
Passo 2, dentro das delimitações da tag body, coloque a seguinte estrutura html:
**Obs: “” é opcional, pois você também pode criar uma animação sem precisar de um ativador (pois o button funciona como um disparador da animação)
Passo 3, você pode usar a seguinte linha de código jQuery, para disparar a sua animação:
$(“#animation”).addClass(“journal”);
});
journal é uma das classes que o nosso framework disponibiliza para nós usarmos
Caso queira adicionar o efeito em algum determinado tempo, você pode adicionar um temporizador:
$(“#animation”).addClass(“journal”);
},2000);
Atenção:
Se você optar adicionar mais alguma animação em um elemento que já sofreu uma outra animação do All Animation, ou queira reiniciar a animação, você terá que remover a classe da última animação e inserir a sua, ex:
Temos várias classes no lugar da class journal, vejamos quais são:
Especiais:
Bounce:
Perspective:
Fading Entrances:
>Rotate:
>Agrecives:
Não irei listar todas, até porque estou adicionando mais com o passar do tempo 😀
Mais alguém utiliza?
Segundo o google analytics, no primeiro mês que lancei este framework , mais de 127 países usaram o All Animation em seus projetos 😀
Finalizando…
Segue abaixo dois links para mais informações:
Clique aqui para visualizar uma demo, dos efeitos
Github, clique aqui
Por hoje é só meus amigos ninjas, obrigado pela atenção, e até a próxima. 😀
