How to use animate.css + wow, js

2

Well, I'm using animate.css ( link ), and more specifically fadeInDown to show an element to the scroll the website page. However, the effect is loaded next to the page, not when I scroll it. Does anyone know what to say? Do I need to use something else in css or html?

    
asked by anonymous 12.07.2016 / 17:02

1 answer

2

You can use wow.js , all animate.css animations:

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><scriptsrc="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>

Here you have more complete examples

    
12.07.2016 / 17:22