antonscie antonscie - 3 months ago 10
HTML Question

setting drop range for wow js

hello i try to reach like on this page http://mynameismatthieu.com/WOW/index.html
if we look at that doge image (right from such easy and right from very JS), the doge image drop to bottom (from way top)

i try to reach that result with this:

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus velit obcaecati et, tenetur excepturi voluptatum doloremque reprehenderit esse nisi quae necessitatibus facilis provident voluptatem quos, dolorem dicta, modi eos iusto.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus velit obcaecati et, tenetur excepturi voluptatum doloremque reprehenderit esse nisi quae necessitatibus facilis provident voluptatem quos, dolorem dicta, modi eos iusto.</p>

<div class="about-tile">
<h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur commodi saepe atque vitae harum, alias impedit sunt. Praesentium esse voluptatem possimus, autem, tenetur maiores modi ab veritatis nam architecto excepturi!</h2>
<hr class="divider wow fadeInDown" data-wow-duration="2s" data-wow-delay="0.5s" >
</div>


or you can see on here:
https://jsfiddle.net/fvjqj7f0/2/

as you can see the result from what i code, the hr only go down a little bit. i need to the hr start go down from
h1
how to do like that

Answer

Your issue is actually due to the fadeInDown animation :

fadeInDown make it appear a little bit higher than its final place. In the demo bounceIndown is used to drop from the top of the page.

On animate css website you can have all the availables animations. You can use fadeInDownBig to archieve a drop from the top of the page, but i believe that you can't use wow.js to drop from a specific position. You should use keyframes animations to do so. (with some custom javascript)

Here is the working example