Scroll & Animate.css - JS file to combing OnScroll & CSS Animations

ScrollAnimate.js

// Code Based on this Tutorial - http://www.web2feel.com/tutorial-for-animated-scroll-loading-effects-with-animate-css-and-jquery/

// jQuery Viewport Checker
 
(function(e){e.fn.viewportChecker=function(t){var n={classToAdd:"visible",classToRemove:"invisible",offset:100,repeat:false,invertBottomOffset:true,callbackFunction:function(e,t){},scrollHorizontal:false};e.extend(n,t);var r=this,i={height:e(window).height(),width:e(window).width()},s=navigator.userAgent.toLowerCase().indexOf("webkit")!=-1?"body":"html";this.checkElements=function(){var t,o;if(!n.scrollHorizontal){t=e(s).scrollTop();o=t+i.height}else{t=e(s).scrollLeft();o=t+i.width}r.each(function(){var r=e(this),i={},s={};if(r.data("vp-add-class"))s.classToAdd=r.data("vp-add-class");if(r.data("vp-remove-class"))s.classToRemove=r.data("vp-remove-class");if(r.data("vp-offset"))s.offset=r.data("vp-offset");if(r.data("vp-repeat"))s.repeat=r.data("vp-repeat");if(r.data("vp-scrollHorizontal"))s.scrollHorizontal=r.data("vp-scrollHorizontal");if(r.data("vp-invertBottomOffset"))s.scrollHorizontal=r.data("vp-invertBottomOffset");e.extend(i,n);e.extend(i,s);if(r.hasClass(i.classToAdd)&&!i.repeat){return}var u=!i.scrollHorizontal?Math.round(r.offset().top)+i.offset:Math.round(r.offset().left)+i.offset,a=!i.scrollHorizontal?u+r.height():u+r.width();if(i.invertBottomOffset)a-=i.offset*2;if(u<o&&a>t){r.removeClass(i.classToRemove);r.addClass(i.classToAdd);i.callbackFunction(r,"add")}else if(r.hasClass(i.classToAdd)&&i.repeat){r.removeClass(i.classToAdd);i.callbackFunction(r,"remove")}})};e(window).bind("load scroll touchmove MSPointerMove",this.checkElements);e(window).resize(function(t){i={height:e(window).height(),width:e(window).width()},r.checkElements()});this.checkElements();return this}})(jQuery)
 
// Client Specific Code Below
 
jQuery(document).ready(function() {
     
    jQuery('.class').addClass("fade-out").viewportChecker({
        classToAdd: 'fade-in animated fadeIn',
        offset: 150
       });
});
 
// Add the Following CSS to Stylesheet
// .fade-out {opacity: 0;} .fade-in{opacity:1;}