Classe em JavaScript feita para facilitar o trabalho com animações básicas em HTML e CSS.
Para a classe executar as animações, você não precisa manipular nada do seu CSS. Dentro do próprio script, as regras CSS já estão configuradas.
Para usar o script, você deve adicioná-lo a pasta do seu projeto e seguir os passos abaixo:
-
Como essa classe é um módulo, para você conseguir utilizá-la em seu projeto precisará utilizar o import do JavaScript. Esse recurso está presente na linguagem desde o ES2016.
Você pode ler mais sobre na documentação da MDN: Import. 😄 👍
Ou seja, adicione o
type="module"
na tag HTML do script que você irá importar a classe Animate.<script type="module" src="js/exemplo.js"></script>
-
Agora seu script já está pronto para receber imports. Seguindo o exemplo acima, dentro do nosso arquivo
exemplo.js
vamos importar a classe animate.import Animate from "Animate.js";
-
Pronto! Agora você já pode instanciar a classe Animate em algum objeto do seu script e utilizar suas funcionalidades ✌️
A animate trabalha com uma ideia simples. Basta capturar o elemento que deseja animar, setar e iniciar a animação.
<div class="card"></div>
(function anima_card(){
/* definindo var que recebe a classe */
const animacao = new Animate();
const card = document.querySelector(".card");
/* setando animação passando o elemento e o deslocamento em pixels*/
animacao.setAnimationRight(card, 200);
window.addEventListener("load", () => {
/* iniciando animação ao carregar a página */
animacao.startAnimate(card);
})
})();
Como descrito no exemplo acima, após instanciar o objeto animação e capturar o elemento que será animado, você precisará apenas setar a animação de sua preferência. Neste caso usamos o método setAnimationRight()
. Outra observação muito importante para fazer com que a animação rode é a presença do Event Listener de load na página. Assim toda vez que a página for carregada, o método startAnimate()
é acionado. Isso deve ser obrigatório no seu código.
🔥 Obrigatório: recebe o elemento e inicia a animação do mesmo
startAnimate(element, time = 1)
⭐ Unidirecionais: recebem o elemento a ser animado e o valor do deslocamento em pixels
setAnimationUp(element, value)
setAnimationDown(element, value)
setAnimationRight(element, value)
setAnimationLeft(element, value)
⭐ MultiDirecionais: recebe o elemento a ser animado e os valores de deslocamento em pixels
setCustomAnimation(element, x, y, z = 0)
⭐De escrita: recebe o texto a ser animado e o escreve na tela
setAnimationWrite(element)
⭐ De opacidade: recebe o elemento a ser animado e faz a transição na opacidade
setAnimationOpacity(element)
Caso você encontre falhas ou deseje sugerir melhorias, fique a vontade.
Espero que ajude nos seus próximos projetos. 😉😁