Plugin simples para animação de entrada no site.
// 1 - Copie o arquivo simple-anime.js da pasta dist e cole no seu site.
// 2 - Link o arquivo utilizando a tag script /js/plugins é apenas um exemplo, caso você tenha colocado o arquivo dentro da pasta de plugins
<script src="./js/plugins/simple-anime.js"></script>
// 3 - Inicie a classe do slide:
new SimpleAnime();<!-- 4 Adicione o atributo data-anime ao elemento que
deseja animar. Informe o total em milessegundos, que o JavaScript
deve esperar até a animação iniciar -->
<h1 data-anime="500">Título do Site</h1>
<p data-anime="1000">Descrição da Página</p>
<button data-anime="1500">Clique Aqui</button>
<!-- 5 Para criar animações diferentes, adicione classes
aos elementos que deseja diferenciar. E defina o transform
inicial da animação na classe -->
<h1 data-anime="500" class="fadeInDown">Título do Site</h1>
<p data-anime="1000" class="fadeInDown">Descrição da Página</p>
<button data-anime="1500">Clique Aqui</button>/* 6 Adicione o CSS Essêncial abaixo */
[data-anime] {
opacity: 0;
}
.anime {
opacity: 1;
transform: none;
transition: transform .8s, opacity .8s;
}
/* 7 CSS personalizado dependendo da animação desejada */
.fadeInDown {
transform: translate3d(0,-20px,0);
}
.fadeInUp {
transform: translate3d(0,20px,0);
}
.fadeInRight {
transform: translate3d(20px,0,0);
}
.fadeInLeft {
transform: translate3d(-20px,0,0);
}