parallax.min.js 9.3 KB

1234
  1. /*
  2. * parallax.min.js
  3. */
  4. (function(t){if(!Date.now){Date.now=function(){return new Date().getTime()}}if(!t.requestAnimationFrame){(function(){var y=["webkit","moz"];for(var w=0;w<y.length&&!t.requestAnimationFrame;++w){var z=y[w];t.requestAnimationFrame=t[z+"RequestAnimationFrame"];t.cancelAnimationFrame=t[z+"CancelAnimationFrame"]||t[z+"CancelRequestAnimationFrame"]}if(/iP(ad|hone|od).*OS 6/.test(t.navigator.userAgent)||!t.requestAnimationFrame||!t.cancelAnimationFrame){var x=0;t.requestAnimationFrame=function(A){var C=Date.now();var B=Math.max(x+16,C);return setTimeout(function(){A(x=B)},B-C)};t.cancelAnimationFrame=clearTimeout}}())}var p=document.createElement("div");function g(y){var x=["O","Moz","ms","Ms","Webkit"];var w=x.length;if(p.style[y]!==undefined){return !0}y=y.charAt(0).toUpperCase()+y.substr(1);while(--w>-1&&p.style[x[w]+y]===undefined){}return w>=0}var n=g("transform");var o=g("perspective");var q=navigator.userAgent;var b=q.toLowerCase().indexOf("android")>-1;var f=/iPad|iPhone|iPod/.test(q)&&!t.MSStream;var c=q.toLowerCase().indexOf("firefox")>-1;var d=q.indexOf("MSIE ")>-1||q.indexOf("Trident/")>-1||q.indexOf("Edge/")>-1;var e=document.all&&!t.atob;var v;var u;function s(){v=t.innerWidth||document.documentElement.clientWidth;u=t.innerHeight||document.documentElement.clientHeight}s();var i=[];var h=(function(){var w=0;function x(B,C){var y=this,z;y.$item=B;y.defaults={type:"scroll",speed:0.5,imgSrc:null,imgWidth:null,imgHeight:null,elementInViewport:null,zIndex:-100,noAndroid:!1,noIos:!0,onScroll:null,onInit:null,onDestroy:null,onCoverImage:null};z=JSON.parse(y.$item.getAttribute("data-jarallax")||"{}");y.options=y.extend({},y.defaults,z,C);if(!n||b&&y.options.noAndroid||f&&y.options.noIos){return}y.options.speed=Math.min(2,Math.max(-1,parseFloat(y.options.speed)));var A=y.options.elementInViewport;if(A&&typeof A==="object"&&typeof A.length!=="undefined"){A=A[0]}if(!A instanceof Element){A=null}y.options.elementInViewport=A;y.instanceID=w++;y.image={src:y.options.imgSrc||null,$container:null,$item:null,width:y.options.imgWidth||null,height:y.options.imgHeight||null,useImgTag:f||b||d,position:!o||c?"absolute":"fixed"};if(y.initImg()){y.init()}}return x}());h.prototype.css=function(w,y){if(typeof y==="string"){if(t.getComputedStyle){return t.getComputedStyle(w).getPropertyValue(y)}return w.style[y]}if(y.transform){if(o){y.transform+=" translateZ(0)"}y.WebkitTransform=y.MozTransform=y.msTransform=y.OTransform=y.transform}for(var x in y){w.style[x]=y[x]}return w};h.prototype.extend=function(y){y=y||{};for(var w=1;w<arguments.length;w++){if(!arguments[w]){continue}for(var x in arguments[w]){if(arguments[w].hasOwnProperty(x)){y[x]=arguments[w][x]}}}return y};h.prototype.initImg=function(){var w=this;if(w.image.src===null){w.image.src=w.css(w.$item,"background-image").replace(/^url\(['"]?/g,"").replace(/['"]?\)$/g,"")}return !(!w.image.src||w.image.src==="none")};h.prototype.init=function(){var x=this,y={position:"absolute",top:0,left:0,width:"100%",height:"100%",overflow:"hidden",pointerEvents:"none"},z={};x.$item.setAttribute("data-jarallax-original-styles",x.$item.getAttribute("style"));if(x.css(x.$item,"position")==="static"){x.css(x.$item,{position:"relative"})}if(x.css(x.$item,"z-index")==="auto"){x.css(x.$item,{zIndex:0})}x.image.$container=document.createElement("div");x.css(x.image.$container,y);x.css(x.image.$container,{visibility:"hidden","z-index":x.options.zIndex});x.image.$container.setAttribute("id","jarallax-container-"+x.instanceID);x.$item.appendChild(x.image.$container);if(x.image.useImgTag){x.image.$item=document.createElement("img");x.image.$item.setAttribute("src",x.image.src);z=x.extend({"max-width":"none"},y,z)}else{x.image.$item=document.createElement("div");z=x.extend({"background-position":"50% 50%","background-size":"100% auto","background-repeat":"no-repeat no-repeat","background-image":'url("'+x.image.src+'")'},y,z)}var C=0;var w=x.$item;while(w!==null&&w!==document&&C===0){var B=x.css(w,"-webkit-transform")||x.css(w,"-moz-transform")||x.css(w,"transform");if(B&&B!=="none"){C=1;x.css(x.image.$container,{transform:"translateX(0) translateY(0)"})}w=w.parentNode}if(C||x.options.type==="opacity"||x.options.type==="scale"||x.options.type==="scale-opacity"){x.image.position="absolute"}z.position=x.image.position;x.css(x.image.$item,z);x.image.$container.appendChild(x.image.$item);function A(){x.coverImage();x.clipContainer();x.onScroll(!0);if(x.options.onInit){x.options.onInit.call(x)}setTimeout(function(){if(x.$item){x.css(x.$item,{"background-image":"none","background-attachment":"scroll","background-size":"auto"})}},0)}if(x.image.width&&x.image.height){A()}else{x.getImageSize(x.image.src,function(E,D){x.image.width=E;x.image.height=D;A()})}i.push(x)};h.prototype.destroy=function(){var w=this;for(var x=0,y=i.length;x<y;x++){if(i[x].instanceID===w.instanceID){i.splice(x,1);break}}var A=w.$item.getAttribute("data-jarallax-original-styles");w.$item.removeAttribute("data-jarallax-original-styles");if(A==="null"){w.$item.removeAttribute("style")}else{w.$item.setAttribute("style",A)}if(w.$clipStyles){w.$clipStyles.parentNode.removeChild(w.$clipStyles)}w.image.$container.parentNode.removeChild(w.image.$container);if(w.options.onDestroy){w.options.onDestroy.call(w)}delete w.$item.jarallax;for(var z in w){delete w[z]}};h.prototype.getImageSize=function(x,w){if(!x||!w){return}var y=new Image();y.onload=function(){w(y.width,y.height)};y.src=x};h.prototype.clipContainer=function(){if(e){return}var w=this,z=w.image.$container.getBoundingClientRect(),B=z.width,y=z.height;if(!w.$clipStyles){w.$clipStyles=document.createElement("style");w.$clipStyles.setAttribute("type","text/css");w.$clipStyles.setAttribute("id","#jarallax-clip-"+w.instanceID);var x=document.head||document.getElementsByTagName("head")[0];x.appendChild(w.$clipStyles)}var A=["#jarallax-container-"+w.instanceID+" {"," clip: rect(0 "+B+"px "+y+"px 0);"," clip: rect(0, "+B+"px, "+y+"px, 0);","}"].join("\n");if(w.$clipStyles.styleSheet){w.$clipStyles.styleSheet.cssText=A}else{w.$clipStyles.innerHTML=A}};h.prototype.coverImage=function(){var w=this;if(!w.image.width||!w.image.height){return}var D=w.image.$container.getBoundingClientRect(),z=D.width,x=D.height,y=D.left,B=w.image.width,A=w.image.height,J=w.options.speed,C=w.options.type==="scroll"||w.options.type==="scroll-opacity",I=0,H=0,E=x,F=0,G=0;if(C){if(J<0){I=J*Math.max(x,u)}else{I=J*(x+u)}if(J>1){E=Math.abs(I-u)}else{if(J<0){E=I/J+Math.abs(I)}else{E+=Math.abs(u-x)*(1-J)}}I/=2}H=E*B/A;if(H<z){H=z;E=H*A/B}if(C){F=y+(z-H)/2;G=(u-E)/2}else{F=(z-H)/2;G=(x-E)/2}if(w.image.position==="absolute"){F-=y}w.parallaxScrollDistance=I;w.css(w.image.$item,{width:H+"px",height:E+"px",marginLeft:F+"px",marginTop:G+"px"});if(w.options.onCoverImage){w.options.onCoverImage.call(w)}};h.prototype.isVisible=function(){return this.isElementInViewport||!1};h.prototype.onScroll=function(F){var w=this;if(!w.image.width||!w.image.height){return}var I=w.$item.getBoundingClientRect(),E=I.top,D=I.height,K={visibility:"visible",backgroundPosition:"50% 50%"};var L=I;if(w.options.elementInViewport){L=w.options.elementInViewport.getBoundingClientRect()}w.isElementInViewport=L.bottom>=0&&L.right>=0&&L.top<=u&&L.left<=v;if(F?!1:!w.isElementInViewport){return}var B=Math.max(0,E),C=Math.max(0,D+E),y=Math.max(0,-E),z=Math.max(0,E+D-u),A=Math.max(0,D-(E+D-u)),x=Math.max(0,-E+u-D),G=1-2*(u-E)/(u+D);var M=1;if(D<u){M=1-(y||z)/D}else{if(C<=u){M=C/u}else{if(A<=u){M=A/u}}}if(w.options.type==="opacity"||w.options.type==="scale-opacity"||w.options.type==="scroll-opacity"){K.transform="";K.opacity=M}if(w.options.type==="scale"||w.options.type==="scale-opacity"){var J=1;if(w.options.speed<0){J-=w.options.speed*M}else{J+=w.options.speed*(1-M)}K.transform="scale("+J+")"}if(w.options.type==="scroll"||w.options.type==="scroll-opacity"){var H=w.parallaxScrollDistance*G;if(w.image.position==="absolute"){H-=E}K.transform="translateY("+H+"px)"}w.css(w.image.$item,K);if(w.options.onScroll){w.options.onScroll.call(w,{section:I,beforeTop:B,beforeTopEnd:C,afterTop:y,beforeBottom:z,beforeBottomEnd:A,afterBottom:x,visiblePercent:M,fromViewportCenter:G})}};function a(w,x,y){if(w.addEventListener){w.addEventListener(x,y)}else{w.attachEvent("on"+x,function(){y.call(w)})}}function r(w){t.requestAnimationFrame(function(){if(w.type!=="scroll"){s()}for(var x=0,y=i.length;x<y;x++){if(w.type!=="scroll"){i[x].coverImage();i[x].clipContainer()}i[x].onScroll()}})}a(t,"scroll",r);a(t,"resize",r);a(t,"orientationchange",r);a(t,"load",r);var m=function(x){if(typeof HTMLElement==="object"?x instanceof HTMLElement:x&&typeof x==="object"&&x!==null&&x.nodeType===1&&typeof x.nodeName==="string"){x=[x]}var A=arguments[1],w=Array.prototype.slice.call(arguments,2),z=x.length,y=0,B;for(y;y<z;y++){if(typeof A==="object"||typeof A==="undefined"){if(!x[y].jarallax){x[y].jarallax=new h(x[y],A)}}else{if(x[y].jarallax){B=x[y].jarallax[A].apply(x[y].jarallax,w)}}if(typeof B!=="undefined"){return B}}return x};m.constructor=h;var l=t.jarallax;t.jarallax=m;t.jarallax.noConflict=function(){t.jarallax=l;return this};if(typeof jQuery!=="undefined"){var j=function(){var w=arguments||[];Array.prototype.unshift.call(w,this);var x=m.apply(t,w);return typeof x!=="object"?x:this};j.constructor=h;var k=jQuery.fn.jarallax;jQuery.fn.jarallax=j;jQuery.fn.jarallax.noConflict=function(){jQuery.fn.jarallax=k;return this}}a(t,"DOMContentLoaded",function(){m(document.querySelectorAll("[data-jarallax], [data-jarallax-video]"))})}(window));