jquery.scrollme.min.js

var scrollme=function($){var _this={},$document=$(document),$window=$(window);return _this.body_height=0,_this.viewport_height=0,_this.viewport_top=0,_this.viewport_bottom=0,_this.viewport_top_previous=-1,_this.elements=[],_this.elements_in_view=[],_this.property_defaults={opacity:1,translatex:0,translatey:0,translatez:0,rotatex:0,rotatey:0,rotatez:0,scale:1,scalex:1,scaley:1,scalez:1},_this.scrollme_selector=".scrollme",_this.animateme_selector=".animateme",_this.update_interval=10,_this.easing_functions={linear:function(x){return x},easeout:function(x){return x*x*x},easein:function(x){return x=1-x,1-x*x*x},easeinout:function(x){return.5>x?4*x*x*x:(x=1-x,1-4*x*x*x)}},_this.init_events=["load","DOMContentLoaded","page:load","page:change"],_this.init_if=function(){return!0},_this.init=function(){return _this.init_if()?(_this.init_elements(),_this.on_resize(),$window.on("resize orientationchange",function(){_this.on_resize()}),$window.on("load",function(){setTimeout(function(){_this.on_resize()},100)}),setInterval(_this.update,_this.update_interval),!0):!1},_this.init_elements=function(){$(_this.scrollme_selector).each(function(){var element={};element.element=$(this);var effects=[];$(this).find(_this.animateme_selector).addBack(_this.animateme_selector).each(function(){var effect={};effect.element=$(this),effect.when=effect.element.data("when"),effect.from=effect.element.data("from"),effect.to=effect.element.data("to"),effect.element.is("[data-crop]")?effect.crop=effect.element.data("crop"):effect.crop=!0,effect.element.is("[data-easing]")?effect.easing=_this.easing_functions[effect.element.data("easing")]:effect.easing=_this.easing_functions.easeout;var properties={};effect.element.is("[data-opacity]")&&(properties.opacity=effect.element.data("opacity")),effect.element.is("[data-translatex]")&&(properties.translatex=effect.element.data("translatex")),effect.element.is("[data-translatey]")&&(properties.translatey=effect.element.data("translatey")),effect.element.is("[data-translatez]")&&(properties.translatez=effect.element.data("translatez")),effect.element.is("[data-rotatex]")&&(properties.rotatex=effect.element.data("rotatex")),effect.element.is("[data-rotatey]")&&(properties.rotatey=effect.element.data("rotatey")),effect.element.is("[data-rotatez]")&&(properties.rotatez=effect.element.data("rotatez")),effect.element.is("[data-scale]")&&(properties.scale=effect.element.data("scale")),effect.element.is("[data-scalex]")&&(properties.scalex=effect.element.data("scalex")),effect.element.is("[data-scaley]")&&(properties.scaley=effect.element.data("scaley")),effect.element.is("[data-scalez]")&&(properties.scalez=effect.element.data("scalez")),effect.properties=properties,effects.push(effect)}),element.effects=effects,_this.elements.push(element)})},_this.update=function(){window.requestAnimationFrame(function(){_this.update_viewport_position(),_this.viewport_top_previous!=_this.viewport_top&&(_this.update_elements_in_view(),_this.animate()),_this.viewport_top_previous=_this.viewport_top})},_this.animate=function(){for(var elements_in_view_length=_this.elements_in_view.length,i=0;elements_in_view_length>i;i++)for(var element=_this.elements_in_view[i],effects_length=element.effects.length,e=0;effects_length>e;e++){var effect=element.effects[e];switch(effect.when){case"view":case"span":var start=element.top-_this.viewport_height,end=element.bottom;break;case"exit":var start=element.bottom-_this.viewport_height,end=element.bottom;break;default:var start=element.top-_this.viewport_height,end=element.top}effect.crop&&(0>start&&(start=0),end>_this.body_height-_this.viewport_height&&(end=_this.body_height-_this.viewport_height));var scroll=(_this.viewport_top-start)/(end-start),from=effect.from,to=effect.to,length=to-from,scroll_relative=(scroll-from)/length,scroll_eased=effect.easing(scroll_relative),opacity=_this.animate_value(scroll,scroll_eased,from,to,effect,"opacity"),translatey=_this.animate_value(scroll,scroll_eased,from,to,effect,"translatey"),translatex=_this.animate_value(scroll,scroll_eased,from,to,effect,"translatex"),translatez=_this.animate_value(scroll,scroll_eased,from,to,effect,"translatez"),rotatex=_this.animate_value(scroll,scroll_eased,from,to,effect,"rotatex"),rotatey=_this.animate_value(scroll,scroll_eased,from,to,effect,"rotatey"),rotatez=_this.animate_value(scroll,scroll_eased,from,to,effect,"rotatez"),scale=_this.animate_value(scroll,scroll_eased,from,to,effect,"scale"),scalex=_this.animate_value(scroll,scroll_eased,from,to,effect,"scalex"),scaley=_this.animate_value(scroll,scroll_eased,from,to,effect,"scaley"),scalez=_this.animate_value(scroll,scroll_eased,from,to,effect,"scalez");"scale"in effect.properties&&(scalex=scale,scaley=scale,scalez=scale),effect.element.css({opacity:opacity,transform:"translate3d( "+translatex+"px , "+translatey+"px , "+translatez+"px ) rotateX( "+rotatex+"deg ) rotateY( "+rotatey+"deg ) rotateZ( "+rotatez+"deg ) scale3d( "+scalex+" , "+scaley+" , "+scalez+" )"})}},_this.animate_value=function(scroll,scroll_eased,from,to,effect,property){var value_default=_this.property_defaults[property];if(!(property in effect.properties))return value_default;var value_target=effect.properties[property],forwards=to>from;if(from>scroll&&forwards)return value_default;if(scroll>to&&forwards)return value_target;if(scroll>from&&!forwards)return value_default;if(to>scroll&&!forwards)return value_target;var new_value=value_default+scroll_eased*(value_target-value_default);switch(property){case"opacity":new_value=new_value.toFixed(2);break;case"translatex":new_value=new_value.toFixed(0);break;case"translatey":new_value=new_value.toFixed(0);break;case"translatez":new_value=new_value.toFixed(0);break;case"rotatex":new_value=new_value.toFixed(1);break;case"rotatey":new_value=new_value.toFixed(1);break;case"rotatez":new_value=new_value.toFixed(1);break;case"scale":new_value=new_value.toFixed(3)}return new_value},_this.update_viewport_position=function(){_this.viewport_top=$window.scrollTop(),_this.viewport_bottom=_this.viewport_top+_this.viewport_height},_this.update_elements_in_view=function(){_this.elements_in_view=[];for(var elements_length=_this.elements.length,i=0;elements_length>i;i++)_this.elements[i].top<_this.viewport_bottom&&_this.elements[i].bottom>_this.viewport_top&&_this.elements_in_view.push(_this.elements[i])},_this.on_resize=function(){_this.update_viewport(),_this.update_element_heights(),_this.update_viewport_position(),_this.update_elements_in_view(),_this.animate()},_this.update_viewport=function(){_this.body_height=$document.height(),_this.viewport_height=$window.height()},_this.update_element_heights=function(){for(var elements_length=_this.elements.length,i=0;elements_length>i;i++){var element_height=_this.elements[i].element.outerHeight(),position=_this.elements[i].element.offset();_this.elements[i].height=element_height,_this.elements[i].top=position.top,_this.elements[i].bottom=position.top+element_height}},$document.one(_this.init_events.join(" "),function(){_this.init()}),_this}(jQuery);