Skip to content

Latest commit

 

History

History
201 lines (147 loc) · 4.58 KB

README.br.md

File metadata and controls

201 lines (147 loc) · 4.58 KB

All Animation

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

Traduções

V3 agora está pronto para ser usado!

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 🥰🥰

Como usar:

É fácil de usar, vamos ver passo a passo:

Etapa 1, instale a biblioteca como dependência

É bem direto:

npm install all-animation

or

yarn add all-animation

Etapa 2, vincule a biblioteca ao seu projeto:

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

Etapa 2, html:

<div id="animation"></div>

<button class="anny-class">Classe de gatilho, vá!</button>

Etapa 3, jQuery (você também pode usar JavaScript simples):

$(".any-class").click(() =>{
 $("#animation").addClass("a-journal");
});

Opcional

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);

Cuidados:

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:

Especiais:

  • a-dance
  • a-journal
  • a-pulse
  • a-pulse-slow
  • a-jamp
  • a-four-rock

Pulos:

  • a-enter-up-bounce
  • a-enter-down-bounce
  • a-enter-right-bounce
  • a-enter-left-bounce
  • a-scale-bounce
  • a-jump-bounce

Perspectiva:

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

Entradas que somem:

  • a-flip-top
  • a-flip-left
  • a-flip-right
  • a-flip-bottom

Girar:

  • a-rotate-flip-down
  • a-rotate-down-bounce
  • a-rotate-out

Agrecivos:

  • a-flash-bang
  • a-bomb

Jello

  • a-jello-horizontal
  • a-jello-vertical

Vibrate

  • a-vibrate-low
  • a-vibrate-medium
  • a-vibrate-high

Wobble

  • a-wobble-bottom
  • a-wobble-left
  • a-wobble-right
  • a-wobble-top


Contribuidores:

Se você deseja contribuir para o nosso projeto, leia o arquivo: contributing.md 😊

Créditos:

Clóvis Neto