관리-도구

편집 파일: simpleParallax.min.js

/** * simple-parallax-js - simpleParallax is a simple and lightweight JS plugin that gives your website parallax animations on the images * @version v4.2.1 * @date: 09-03-2019 17:4:39 * @link https://simpleparallax.com/ */ "use strict";var _extends=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(e[i]=n[i])}return e},_createClass=function(){function i(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(e,t,n){return t&&i(e.prototype,t),n&&i(e,n),e}}(),_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e};function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}!function(e,t){"function"==typeof define&&define.amd?define([],function(){return t(e)}):"object"===("undefined"==typeof exports?"undefined":_typeof(exports))?module.exports=t(e):e.pagelayerParallax=t(e)}("undefined"!=typeof global?global:"undefined"!=typeof window?window:void 0,function(o){var i=function(){for(var e,t="transform webkitTransform mozTransform oTransform msTransform".split(" "),n=0;void 0===e;)e=null!=document.createElement("div").style[t[n]]?t[n]:void 0,n++;return e}();!function(){for(var a=0,e=["ms","moz","webkit","o"],t=0;t<e.length&&!o.requestAnimationFrame;++t)o.requestAnimationFrame=o[e[t]+"RequestAnimationFrame"],o.cancelAnimationFrame=o[e[t]+"CancelAnimationFrame"]||o[e[t]+"CancelRequestAnimationFrame"];o.requestAnimationFrame||(o.requestAnimationFrame=function(e,t){var n=(new Date).getTime(),i=Math.max(0,16-(n-a)),s=o.setTimeout(function(){e(n+i)},i);return a=n+i,s}),o.cancelAnimationFrame||(o.cancelAnimationFrame=function(e){clearTimeout(e)})}(),Element.prototype.matches||(Element.prototype.matches=Element.prototype.msMatchesSelector||Element.prototype.webkitMatchesSelector),Element.prototype.closest||(Element.prototype.closest=function(e){var t=this;if(!document.documentElement.contains(t))return null;do{if(t.matches(e))return t;t=t.parentElement||t.parentNode}while(null!==t&&1===t.nodeType);return null});var s=[],t=-1,a=void 0,r=void 0,l=void 0,h=void 0,m=!1,u=function(){function n(e,t){_classCallCheck(this,n),this.element=e,this.elementContainer=e,this.defaults={delay:.6,orientation:"up",scale:1.3,overflow:!1,transition:"cubic-bezier(0,0,0,1)",breakpoint:!1},this.settings=_extends(this.defaults,t),this.settings.breakpoint&&document.documentElement.clientWidth<=this.settings.breakpoint||(this.init=this.init.bind(this),this.animationFrame=this.animationFrame.bind(this),this.handleResize=this.handleResize.bind(this),this.isImageLoaded(this.element)?this.init():this.element.addEventListener("load",this.init),s.push(this),m||(m=!0,this.getViewportOffsetHeight(),this.animationFrame()))}return _createClass(n,[{key:"init",value:function(){this.isInit||(!1===this.settings.overflow&&this.wrapElement(),this.setStyle(),this.getElementOffset(),this.getTranslateValue(),this.animate(),o.addEventListener("resize",this.handleResize),this.isInit=!0)}},{key:"isImageLoaded",value:function(){return!!this.element.complete&&(void 0===this.element.naturalWidth||0!==this.element.naturalWidth)}},{key:"isVisible",value:function(){return this.elementBottomX>a&&this.elementTopX<r}},{key:"wrapElement",value:function(){var e=this.element.closest("picture")||this.element,t=document.createElement("div");t.classList.add("pagelayerParallax"),t.style.overflow="hidden",e.parentNode.insertBefore(t,e),t.appendChild(e),this.elementContainer=t}},{key:"unWrapElement",value:function(){var e=this.elementContainer.parentNode;if(e){for(;this.elementContainer.firstChild;)e.insertBefore(this.elementContainer.firstChild,this.elementContainer);e.removeChild(this.elementContainer)}}},{key:"setStyle",value:function(){!1===this.settings.overflow&&(this.element.style[i]="scale("+this.settings.scale+")"),0<this.settings.delay&&(this.element.style.transition="transform "+this.settings.delay+"s "+this.settings.transition),this.element.style.willChange="transform"}},{key:"unSetStyle",value:function(){this.element.style.willChange="",this.element.style[i]="",this.element.style.transition=""}},{key:"getElementOffset",value:function(){var e=this.elementContainer.getBoundingClientRect();this.elementHeight=e.height,this.elementTopX=e.top+o.pageYOffset,this.elementBottomX=this.elementHeight+this.elementTopX}},{key:"getViewportOffsetTop",value:function(){a=o.pageYOffset}},{key:"getViewportOffsetHeight",value:function(){l=document.documentElement.clientHeight}},{key:"getViewportOffsetBottom",value:function(){r=a+l}},{key:"handleResize",value:function(){this.getViewportOffsetHeight(),this.getElementOffset(),this.getRangeMax()}},{key:"getRangeMax",value:function(){var e=this.element.clientHeight;this.rangeMax=e*this.settings.scale-e,"down"!==this.settings.orientation&&"right"!==this.settings.orientation||(this.rangeMax*=-1)}},{key:"getTranslateValue",value:function(){var e=((r-this.elementTopX)/((l+this.elementHeight)/100)).toFixed(1);return e=Math.min(100,Math.max(0,e)),this.oldPercentage!==e&&(this.rangeMax||this.getRangeMax(),this.translateValue=(e/100*this.rangeMax-this.rangeMax/2).toFixed(0),this.oldTranslateValue!==this.translateValue&&(this.oldPercentage=e,this.oldTranslateValue=this.translateValue,!0))}},{key:"animate",value:function(){var e=0,t=0,n=void 0;"left"===this.settings.orientation||"right"===this.settings.orientation?t=this.translateValue+"px":e=this.translateValue+"px",n=!1===this.settings.overflow?"translate3d("+t+", "+e+", 0) scale("+this.settings.scale+")":"translate3d("+t+", "+e+", 0)",this.element.style[i]=n}},{key:"proceedElement",value:function(e){e.isVisible()&&e.getTranslateValue()&&e.animate()}},{key:"animationFrame",value:function(){if(this.getViewportOffsetTop(),t!==a){this.getViewportOffsetBottom();for(var e=0;e<s.length;e++)this.proceedElement(s[e]);h=o.requestAnimationFrame(this.animationFrame),t=a}else h=o.requestAnimationFrame(this.animationFrame)}},{key:"destroy",value:function(){this.isDestroyed||(this.unSetStyle(),!1===this.settings.overflow&&this.unWrapElement(),s.splice(s.indexOf(this),1),s.length||(m=!1,o.cancelAnimationFrame(h)),o.removeEventListener("resize",this.handleResize))}},{key:"isDestroyed",get:function(){return-1===s.indexOf(this)}}]),n}();return function(e,t){var n=[];if(e.length)for(var i=0;i<e.length;i++)n.push(new u(e[i],t));else n.push(new u(e,t));return n}});