2

Galera, estou utilizando o animate.css (https://daneden.github.io/animate.css/), e mais especificamente o fadeInDown para aparecer um elemento ao rolar a página do website. Porém, o efeito é carregado junto a página, e não quando dou um scroll nela. Alguém sabe dizer o que pode ser? Preciso utilizar algo a mais no css ou html?

inserir a descrição da imagem aqui

1 Resposta 1

2

Pode usar wow.js, compatível com todas as animações do animate.css:

new WOW().init();
div {
  height: 600px;
  width: 300px;
}
.inner {
  width: 200px;
  height: 100px;
  background-color:blue;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>

<p>Faça scroll para baixo</p>
<div class="wow pulse infinite" data-wow-duration="0.50s">OLÁ</div>
<div class="wow bounceIn"><div class="inner"></div></div>
<div class="wow lightSpeedOut"><div class="inner"></div></div>
<div class="wow flip"><div class="inner"></div></div>
<div class="wow zoomIn"><div class="inner"></div></div>
<div class="wow swing infinite"><div class="inner"></div></div>
<div class="wow shake"><div class="inner"></div></div>
<div class="wow rotateOut"><div class="inner"></div></div>
<div class="wow hinge"><div class="inner"></div></div>

Aqui tem exemplos mais completos

2
  • Muito obrigado jovem! Havia encontrado o plugin logo que perguntei, mas o js que achei tava com um código em html invés de javascript hahaha. Esse aí deu boa, obrigado! Commented 12/07/2016 às 17:35
  • De nada @AngelAzevedo, pode marcar como aceite se ajudou. Ainda bem que resolveu
    – Miguel
    Commented 12/07/2016 às 17:37

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .