/** * author Remy Sharp * url http://remysharp.com/2009/01/26/element-in-view-event-plugin/ */ (function ($) { function getViewportHeight() { var height = window.innerHeight; // Safari, Opera var mode = document.compatMode; if ( (mode || !$.support.boxModel) ) { // IE, Gecko height = (mode == 'CSS1Compat') ? document.documentElement.clientHeight : // Standards document.body.clientHeight; // Quirks } return height; } $(window).scroll(function () { var vpH = getViewportHeight(), scrolltop = (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop), elems = []; // naughty, but this is how it knows which elements to check for $.each($.cache, function () { if (this.events && this.events.inview) { elems.push(this.handle.elem); } }); if (elems.length) { $(elems).each(function () { var $el = $(this), top = $el.offset().top, height = $el.height(), inview = $el.data('inview') || false; if (scrolltop > (top + height) || scrolltop + vpH < top) { if (inview) { $el.data('inview', false); $el.trigger('inview', [ false ]); } } else if (scrolltop < (top + height)) { if (!inview) { $el.data('inview', true); $el.trigger('inview', [ true ]); } } }); } }); $(function() { var winBr = $(window).width(); if(winBr > 1200){ $('.animation-screen').bind('inview', function (event, visible) { if (visible) { $(this).addClass($(this).attr('data-animate')).removeClass("notvisibility"); } else { $(this).removeClass($(this).attr('data-animate')).addClass("notvisibility"); } }); } else{ $('.animation-screen').removeClass("animation-screen"); } }); // kick the event to pick up any elements already in view. // note however, this only works if the plugin is included after the elements are bound to 'inview' $(function () { $(window).scroll(); }); })(jQuery);