jquery.imageScroll.min.js

(function(e,t){if(typeof define==="function"&&define.amd){define(["jquery"],t)}else{t(e.jQuery)}})(this,function(e){"use strict";function g(e,t){return typeof e===t}function y(e,t){return!!~(""+e).indexOf(t)}function b(e,t){for(var n in e){var r=e[n];if(!y(r,"-")&&u[r]!==undefined){return t=="pfx"?r:true}}return false}function w(e,t,n){for(var r in e){var i=t[e[r]];if(i!==undefined){if(n===false)return e[r];if(g(i,"function")){return i.bind(n||t)}return i}}return false}function E(e,t,n){var r=e.charAt(0).toUpperCase()+e.slice(1),i=(e+" "+f.join(r+" ")+r).split(" ");if(g(t,"string")||g(t,"undefined")){return b(i,t)}else{i=(e+" "+l.join(r+" ")+r).split(" ");return w(i,t,n)}}var t,n={image:null,imageAttribute:"image",holderClass:"imageHolder",container:e("body"),speed:.2,coverRatio:.75,holderMinHeight:200,extraHeight:0,mediaWidth:1600,mediaHeight:900,parallax:true,touch:false},r={},i=document.documentElement,s="imageScrollModernizr",o=document.createElement(s),u=o.style,a="Webkit Moz O ms",f=a.split(" "),l=a.toLowerCase().split(" "),c={},h=e(window),p=0,d="",v,m=function(e,t,n,r){var o,u,a,f,l=document.createElement("div"),c=document.body,h=c||document.createElement("body");if(parseInt(n,10)){while(n--){a=document.createElement("div");a.id=r?r[n]:s+(n+1);l.appendChild(a)}}o=["&#173;",'<style id="s',s,'">',e,"</style>"].join("");l.id=s;(c?l:h).innerHTML+=o;h.appendChild(l);if(!c){h.style.background="";h.style.overflow="hidden";f=i.style.overflow;i.style.overflow="hidden";i.appendChild(h)}u=t(l,e);if(!c){h.parentNode.removeChild(h);i.style.overflow=f}else{l.parentNode.removeChild(l)}return!!u};c["csstransforms"]=function(){return!!E("transform")};c["csstransforms3d"]=function(){var e=!!E("perspective");if(e&&"webkitPerspective"in i.style){m("@media (transform-3d),(-webkit-transform-3d){#imageScrollModernizr{left:9px;position:absolute;height:3px;}}",function(t,n){e=t.offsetLeft===9&&t.offsetHeight===3})}return e};r.prefixed=function(e,t,n){if(!t){return E(e,"pfx")}else{return E(e,t,n)}};window.requestAnimationFrame=r.prefixed("requestAnimationFrame",window)||function(e,t){var n=(new Date).getTime();var r=Math.max(0,16-(n-p));var i=window.setTimeout(function(){e(n+r)},r);p=n+r;return i};if(c["csstransforms3d"]()){d="csstransforms3d"}else if(c["csstransforms"]()){d="csstransforms"}if(d!==""){v=r.prefixed("transform")}t=function(t,r){return{init:function(){this.$imageHolder=e(t);this.settings=e.extend({},n,r);this.image=this.$imageHolder.data(this.settings.imageAttribute)||this.settings.image;this.mediaWidth=this.$imageHolder.data("width")||this.settings.mediaWidth;this.mediaHeight=this.$imageHolder.data("height")||this.settings.mediaHeight;this.coverRatio=this.$imageHolder.data("cover-ratio")||this.settings.coverRatio;this.extraHeight=this.$imageHolder.data("extra-height")||this.settings.extraHeight;this.ticking=false;if(this.image){this.$scrollingElement=e("<img/>",{src:this.image})}else{throw new Error("You need to provide either a data-img attr or an image option")}if(this.settings.touch===true){this.$scrollingElement.css({maxWidth:"100%"}).prependTo(this.$imageHolder)}else if(this.settings.parallax===true){this.$scrollerHolder=e("<div/>",{html:this.$imageHolder.html()}).css({top:0,visibility:"hidden",position:"fixed",overflow:"hidden"}).addClass(this.settings.holderClass).prependTo(this.settings.container);this.$imageHolder.css("visibility","hidden").empty();this.$scrollingElement.css({position:"absolute",visibility:"hidden",maxWidth:"none"}).prependTo(this.$scrollerHolder)}else{this.$scrollerHolder=this.$imageHolder.css({overflow:"hidden"});this.$scrollingElement.css({position:"relative",overflow:"hidden"}).prependTo(this.$imageHolder)}if(this.settings.touch===false){this._adjustImgHolderHeights();if(this.settings.parallax===true){this._updatePositions()}else{this._updateFallbackPositions()}this._bindEvents()}},_adjustImgHolderHeights:function(){var e=h.height(),t=h.width()-this.settings.container.offset().left,n=this.coverRatio*e,r,i,s,o,u,a,f,l,c;n=(this.settings.holderMinHeight<n?Math.floor(n):this.settings.holderMinHeight)+this.extraHeight;l=Math.floor(e-(e-n)*this.settings.speed);a=Math.round(this.mediaWidth*(l/this.mediaHeight));if(a>=t){f=l}else{a=t;f=Math.round(this.mediaHeight*(a/this.mediaWidth))}c=l-n;u=e+n;o=e*2*(1-this.settings.speed)-c;r=-(c/2+(f-l)/2);i=Math.round((a-t)*-.5);s=r-o/2;this.$scrollingElement.css({height:f,width:a});this.$imageHolder.height(n);this.$scrollerHolder.css({height:n,width:a});this.scrollingState={winHeight:e,fromY:s,imgTopPos:r,imgLeftPos:i,imgHolderHeight:n,imgScrollingDistance:o,travelDistance:u,holderDistanceFromTop:this.$imageHolder.offset().top-h.scrollTop()}},_bindEvents:function(){var e=this;h.on("resize",function(t){e._adjustImgHolderHeights();if(e.settings.parallax===true){e._requestTick()}else{e._updateFallbackPositions()}});if(this.settings.parallax===true){h.on("scroll",function(t){e.scrollingState.holderDistanceFromTop=e.$imageHolder.offset().top-h.scrollTop();e._requestTick()})}},_requestTick:function(){var e=this;if(!this.ticking){this.ticking=true;requestAnimationFrame(function(){e._updatePositions()})}},_updatePositions:function(){if(this.scrollingState.holderDistanceFromTop<=this.scrollingState.winHeight&&this.scrollingState.holderDistanceFromTop>=-this.scrollingState.imgHolderHeight){var e=this.scrollingState.holderDistanceFromTop+this.scrollingState.imgHolderHeight,t=e/this.scrollingState.travelDistance,n=Math.round(this.scrollingState.fromY+this.scrollingState.imgScrollingDistance*(1-t)),r=this.settings.container.offset().left;this.$scrollerHolder.css(this._getCSSObject({transform:v,left:r,x:Math.ceil(this.scrollingState.imgLeftPos)+(d===""&&r>0?r:0),y:Math.round(this.scrollingState.holderDistanceFromTop),visibility:"visible"}));this.$scrollingElement.css(this._getCSSObject({transform:v,x:0,y:n,visibility:"visible"}))}else{this.$scrollerHolder.css({visibility:"hidden"});this.$scrollingElement.css({visibility:"hidden"})}this.ticking=false},_updateFallbackPositions:function(){this.$scrollerHolder.css({width:"100%"});this.$scrollingElement.css({top:this.scrollingState.imgTopPos,left:this.scrollingState.imgLeftPos})},_getCSSObject:function(e){if(d==="csstransforms3d"){e.transform="translate3d("+e.x+"px, "+e.y+"px, 0)"}else if(d==="csstransforms"){e.transform="translate("+e.x+"px, "+e.y+"px)"}else{e.top=e.y;e.left=e.x}return e}}};t.defaults=n;e.fn.imageScroll=function(e){return this.each(function(){(new t(this,e)).init()})};return t})