All Animation.css é um conjunto de animações CSS agradáveis e loucas feitas com o objetivo de trazer vida e interações ao seu projeto. São animações para todos os navegadores que darão mais ênfases em suas páginas, como os controles deslizantes e os efeitos 3D ...
Você pode ver o site aqui - vamos mudar nosso layout em breve
Já está no NPM, mas ainda estamos melhorando nossa documentação e API.
Novos módulos também serão lançados no futuro, o primeiro será:
- all-animation/react 🥰🥰
É fácil de usar, vamos ver passo a passo:
É bem direto:
npm install all-animation
or
yarn add all-animation
Atualmente, existem maneiras de vincular toda a animação ao seu projeto:
** via SCSS importações: **
Em seu principalscss
Arquivo do seu projeto, basta incluir o módulo de animação, como:
// main.scss
@import "../node_modules/all-animation/scss/main"
Depois disso, você deve estar pronto para usar nossa biblioteca.
**Carregando apenas animações específicas **
Caso você não queira ter todas as animações em seu pacote final, você pode importar a animação específica que deseja, juntamente com as dependências da Animação principal:
// Dependências principais de avaliação, como variáveis e mixins
@import "../node_modules/all-animation/scss/config/_config";
// A animação específica que você deseja usar
// neste caso "a-bomb"
@import "../node_modules/all-animation/scss/modules/bomb/bomb"
**Link diretamente via arquivo CSS **
Você também pode baixar o arquivo CSS e colocá-lo antes de fechar a tag</head>
:
<link rel="stylesheet" type="text/css" href="node_modules/all-animaton/dist/all-animation.css" />
Também incluímos os mapas de origem, para que você possa ter uma melhor visibilidade de depuração durante o desenvolvimento
<div id="animation"></div>
<button class="anny-class">Classe de gatilho, vá!</button>
$(".any-class").click(() =>{
$("#animation").addClass("a-journal");
});
Se você deseja adicionar o efeito em algum momento especificado, basta colocar um cronômetro:
Exemplo, desencadeando uma animação em um determinado elemento após 2 segundos:
setTimeout(() =>{
$("#animation").addClass("a-journal");
}, 2000);
Se você deseja adicionar alguma animação em um elemento que tem outra animação, ou deseja reiniciar a animação anteriormente acionada, você deve remover a última animação e acionar a nova. Exemplo:
$("#animation").removeClass("a-journal").addClass("a-four-rock");
Temos várias aulas para animações:
- a-dance
- a-journal
- a-pulse
- a-pulse-slow
- a-jamp
- a-four-rock
- a-enter-up-bounce
- a-enter-down-bounce
- a-enter-right-bounce
- a-enter-left-bounce
- a-scale-bounce
- a-jump-bounce
Para usar as animações de perspectiva, adicione um contêiner pai com uma aula a-perspective
, como:
<div class="a-perspective">
<!-- Your animated code here, like: -->
<div class="a-three-flip-up">...</div>
</div>
Algumas aulas para
- a-three-flip-right
- a-three-flip-up
- a-three-flip-down
- a-flip-left-bounce
- a-rotate-flip
- a-flip-right-bounce
- a-flip-top
- a-flip-left
- a-flip-right
- a-flip-bottom
- a-rotate-flip-down
- a-rotate-down-bounce
- a-rotate-out
- a-flash-bang
- a-bomb
- a-jello-horizontal
- a-jello-vertical
- a-vibrate-low
- a-vibrate-medium
- a-vibrate-high
- a-wobble-bottom
- a-wobble-left
- a-wobble-right
- a-wobble-top
Se você deseja contribuir para o nosso projeto, leia o arquivo: contributing.md 😊