ref: http://www.web2feel.com/tutorial-for-animated-scroll-loading-effects-with-animate-css-and-jquery/
LIbs needed:
- animate.css lib
- jquery Viewport Checker
Setup:
1. HTML
<divclass="container">
<divclass="post"><!-- Post content goes here --></div>
<divclass="post"><!-- Post content goes here --></div>
<divclass="post"><!-- Post content goes here --></div>
<divclass="post"><!-- Post content goes here --></div>
<divclass="post"><!-- Post content goes here --></div>
<divclass="post"><!-- Post content goes here --></div>
</div>
2. CSS
.hidden{
opacity:0;
}
.visible{
opacity:1;
}
3. JS
jQuery(document).ready(function() {
jQuery('.post').addClass("hidden").viewportChecker({
classToAdd:'visible animated fadeIn',
offset: 100
});
});