@studio-freight/locomotive-scroll
Advanced tools
Comparing version 0.0.6 to 0.0.7
@@ -1,1 +0,1 @@ | ||
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).LocomotiveScroll=e()}(this,(function(){"use strict";function t(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function e(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}function i(t,i,n){return i&&e(t.prototype,i),n&&e(t,n),t}function n(t,e,i){return e in t?Object.defineProperty(t,e,{value:i,enumerable:!0,configurable:!0,writable:!0}):t[e]=i,t}function s(t,e){var i=Object.keys(t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(t);e&&(n=n.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),i.push.apply(i,n)}return i}function o(t){for(var e=1;e<arguments.length;e++){var i=null!=arguments[e]?arguments[e]:{};e%2?s(Object(i),!0).forEach((function(e){n(t,e,i[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(i)):s(Object(i)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(i,e))}))}return t}function r(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&a(t,e)}function l(t){return(l=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}function a(t,e){return(a=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}function c(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}function h(t,e){return!e||"object"!=typeof e&&"function"!=typeof e?c(t):e}function d(t){var e=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],(function(){}))),!0}catch(t){return!1}}();return function(){var i,n=l(t);if(e){var s=l(this).constructor;i=Reflect.construct(n,arguments,s)}else i=n.apply(this,arguments);return h(this,i)}}function u(t,e,i){return(u="undefined"!=typeof Reflect&&Reflect.get?Reflect.get:function(t,e,i){var n=function(t,e){for(;!Object.prototype.hasOwnProperty.call(t,e)&&null!==(t=l(t)););return t}(t,e);if(n){var s=Object.getOwnPropertyDescriptor(n,e);return s.get?s.get.call(i):s.value}})(t,e,i||t)}function f(t,e){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){if("undefined"==typeof Symbol||!(Symbol.iterator in Object(t)))return;var i=[],n=!0,s=!1,o=void 0;try{for(var r,l=t[Symbol.iterator]();!(n=(r=l.next()).done)&&(i.push(r.value),!e||i.length!==e);n=!0);}catch(t){s=!0,o=t}finally{try{n||null==l.return||l.return()}finally{if(s)throw o}}return i}(t,e)||m(t,e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function p(t){return function(t){if(Array.isArray(t))return v(t)}(t)||function(t){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(t))return Array.from(t)}(t)||m(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function m(t,e){if(t){if("string"==typeof t)return v(t,e);var i=Object.prototype.toString.call(t).slice(8,-1);return"Object"===i&&t.constructor&&(i=t.constructor.name),"Map"===i||"Set"===i?Array.from(t):"Arguments"===i||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(i)?v(t,e):void 0}}function v(t,e){(null==e||e>t.length)&&(e=t.length);for(var i=0,n=new Array(e);i<e;i++)n[i]=t[i];return n}function y(){return{el:document,name:"scroll",offset:[0,0],repeat:!1,smooth:!1,initPosition:{x:0,y:0},direction:"vertical",gestureDirection:"vertical",reloadOnContextChange:!1,lerp:.1,class:"is-inview",scrollbarContainer:!1,scrollbarClass:"c-scrollbar",scrollingClass:"has-scroll-scrolling",draggingClass:"has-scroll-dragging",smoothClass:"has-scroll-smooth",initClass:"has-scroll-init",getSpeed:!1,getDirection:!1,scrollFromAnywhere:!1,multiplier:1,firefoxMultiplier:50,touchMultiplier:2,resetNativeScroll:!0,autoRaf:!0,tablet:{smooth:!1,direction:"vertical",gestureDirection:"vertical",breakpoint:1024},smartphone:{smooth:!1,direction:"vertical",gestureDirection:"vertical"}}}var w=function(){function e(){var i=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};t(this,e);var n=y();Object.assign(this,n,i),this.smartphone=n.smartphone,i.smartphone&&Object.assign(this.smartphone,i.smartphone),this.tablet=n.tablet,i.tablet&&Object.assign(this.tablet,i.tablet),this.namespace="locomotive",this.html=document.documentElement,this.windowHeight=window.innerHeight,this.windowWidth=window.innerWidth,this.windowMiddle={x:this.windowWidth/2,y:this.windowHeight/2},this.els={},this.currentElements={},this.listeners={},this.hasScrollTicking=!1,this.hasCallEventSet=!1,this.checkScroll=this.checkScroll.bind(this),this.checkResize=this.checkResize.bind(this),this.checkEvent=this.checkEvent.bind(this),this.instance={scroll:{x:0,y:0},limit:{x:this.html.offsetWidth-this.windowWidth,y:this.html.offsetHeight-this.windowHeight},currentElements:this.currentElements},this.isMobile?this.isTablet?this.context="tablet":this.context="smartphone":this.context="desktop",this.isMobile&&(this.direction=this[this.context].direction),"horizontal"===this.direction?this.directionAxis="x":this.directionAxis="y",this.getDirection&&(this.instance.direction=null),this.getDirection&&(this.instance.speed=0),this.html.classList.add(this.initClass),window.addEventListener("resize",this.checkResize,!1)}return i(e,[{key:"init",value:function(){this.initEvents()}},{key:"checkScroll",value:function(){this.dispatchScroll()}},{key:"checkResize",value:function(){var t=this;this.resizeTick||(this.resizeTick=!0,requestAnimationFrame((function(){t.resize(),t.resizeTick=!1})))}},{key:"resize",value:function(){}},{key:"checkContext",value:function(){if(this.reloadOnContextChange){this.isMobile=/Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)||"MacIntel"===navigator.platform&&navigator.maxTouchPoints>1||this.windowWidth<this.tablet.breakpoint,this.isTablet=this.isMobile&&this.windowWidth>=this.tablet.breakpoint;var t=this.context;if(this.isMobile?this.isTablet?this.context="tablet":this.context="smartphone":this.context="desktop",t!=this.context)("desktop"==t?this.smooth:this[t].smooth)!=("desktop"==this.context?this.smooth:this[this.context].smooth)&&window.location.reload()}}},{key:"initEvents",value:function(){var t=this;this.scrollToEls=this.el.querySelectorAll("[data-".concat(this.name,"-to]")),this.setScrollTo=this.setScrollTo.bind(this),this.scrollToEls.forEach((function(e){e.addEventListener("click",t.setScrollTo,!1)}))}},{key:"setScrollTo",value:function(t){t.preventDefault(),this.scrollTo(t.currentTarget.getAttribute("data-".concat(this.name,"-href"))||t.currentTarget.getAttribute("href"),{offset:t.currentTarget.getAttribute("data-".concat(this.name,"-offset"))})}},{key:"addElements",value:function(){}},{key:"detectElements",value:function(t){var e=this,i=this.instance.scroll.y,n=i+this.windowHeight,s=this.instance.scroll.x,o=s+this.windowWidth;Object.entries(this.els).forEach((function(r){var l=f(r,2),a=l[0],c=l[1];if(!c||c.inView&&!t||("horizontal"===e.direction?o>=c.left&&s<c.right&&e.setInView(c,a):n>=c.top&&i<c.bottom&&e.setInView(c,a)),c&&c.inView)if("horizontal"===e.direction){var h=c.right-c.left;c.progress=(e.instance.scroll.x-(c.left-e.windowWidth))/(h+e.windowWidth),(o<c.left||s>c.right)&&e.setOutOfView(c,a)}else{var d=c.bottom-c.top;c.progress=(e.instance.scroll.y-(c.top-e.windowHeight))/(d+e.windowHeight),(n<c.top||i>c.bottom)&&e.setOutOfView(c,a)}})),this.hasScrollTicking=!1}},{key:"setInView",value:function(t,e){this.els[e].inView=!0,t.el.classList.add(t.class),this.currentElements[e]=t,t.call&&this.hasCallEventSet&&(this.dispatchCall(t,"enter"),t.repeat||(this.els[e].call=!1))}},{key:"setOutOfView",value:function(t,e){var i=this;this.els[e].inView=!1,Object.keys(this.currentElements).forEach((function(t){t===e&&delete i.currentElements[t]})),t.call&&this.hasCallEventSet&&this.dispatchCall(t,"exit"),t.repeat&&t.el.classList.remove(t.class)}},{key:"dispatchCall",value:function(t,e){this.callWay=e,this.callValue=t.call.split(",").map((function(t){return t.trim()})),this.callObj=t,1==this.callValue.length&&(this.callValue=this.callValue[0]);var i=new Event(this.namespace+"call");this.el.dispatchEvent(i)}},{key:"dispatchScroll",value:function(){var t=new Event(this.namespace+"scroll");this.el.dispatchEvent(t)}},{key:"setEvents",value:function(t,e){this.listeners[t]||(this.listeners[t]=[]);var i=this.listeners[t];i.push(e),1===i.length&&this.el.addEventListener(this.namespace+t,this.checkEvent,!1),"call"===t&&(this.hasCallEventSet=!0,this.detectElements(!0))}},{key:"unsetEvents",value:function(t,e){if(this.listeners[t]){var i=this.listeners[t],n=i.indexOf(e);n<0||(i.splice(n,1),0===i.index&&this.el.removeEventListener(this.namespace+t,this.checkEvent,!1))}}},{key:"checkEvent",value:function(t){var e=this,i=t.type.replace(this.namespace,""),n=this.listeners[i];n&&0!==n.length&&n.forEach((function(t){switch(i){case"scroll":return t(e.instance);case"call":return t(e.callValue,e.callWay,e.callObj);default:return t()}}))}},{key:"startScroll",value:function(){}},{key:"stopScroll",value:function(){}},{key:"setScroll",value:function(t,e){this.instance.scroll={x:0,y:0}}},{key:"destroy",value:function(){var t=this;window.removeEventListener("resize",this.checkResize,!1),Object.keys(this.listeners).forEach((function(e){t.el.removeEventListener(t.namespace+e,t.checkEvent,!1)})),this.listeners={},this.scrollToEls.forEach((function(e){e.removeEventListener("click",t.setScrollTo,!1)})),this.html.classList.remove(this.initClass)}}]),e}();"undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self&&self;function g(t,e){return t(e={exports:{}},e.exports),e.exports}var b=g((function(t,e){t.exports={polyfill:function(){var t=window,e=document;if(!("scrollBehavior"in e.documentElement.style)||!0===t.__forceSmoothScrollPolyfill__){var i,n=t.HTMLElement||t.Element,s={scroll:t.scroll||t.scrollTo,scrollBy:t.scrollBy,elementScroll:n.prototype.scroll||l,scrollIntoView:n.prototype.scrollIntoView},o=t.performance&&t.performance.now?t.performance.now.bind(t.performance):Date.now,r=(i=t.navigator.userAgent,new RegExp(["MSIE ","Trident/","Edge/"].join("|")).test(i)?1:0);t.scroll=t.scrollTo=function(){void 0!==arguments[0]&&(!0!==a(arguments[0])?p.call(t,e.body,void 0!==arguments[0].left?~~arguments[0].left:t.scrollX||t.pageXOffset,void 0!==arguments[0].top?~~arguments[0].top:t.scrollY||t.pageYOffset):s.scroll.call(t,void 0!==arguments[0].left?arguments[0].left:"object"!=typeof arguments[0]?arguments[0]:t.scrollX||t.pageXOffset,void 0!==arguments[0].top?arguments[0].top:void 0!==arguments[1]?arguments[1]:t.scrollY||t.pageYOffset))},t.scrollBy=function(){void 0!==arguments[0]&&(a(arguments[0])?s.scrollBy.call(t,void 0!==arguments[0].left?arguments[0].left:"object"!=typeof arguments[0]?arguments[0]:0,void 0!==arguments[0].top?arguments[0].top:void 0!==arguments[1]?arguments[1]:0):p.call(t,e.body,~~arguments[0].left+(t.scrollX||t.pageXOffset),~~arguments[0].top+(t.scrollY||t.pageYOffset)))},n.prototype.scroll=n.prototype.scrollTo=function(){if(void 0!==arguments[0])if(!0!==a(arguments[0])){var t=arguments[0].left,e=arguments[0].top;p.call(this,this,void 0===t?this.scrollLeft:~~t,void 0===e?this.scrollTop:~~e)}else{if("number"==typeof arguments[0]&&void 0===arguments[1])throw new SyntaxError("Value could not be converted");s.elementScroll.call(this,void 0!==arguments[0].left?~~arguments[0].left:"object"!=typeof arguments[0]?~~arguments[0]:this.scrollLeft,void 0!==arguments[0].top?~~arguments[0].top:void 0!==arguments[1]?~~arguments[1]:this.scrollTop)}},n.prototype.scrollBy=function(){void 0!==arguments[0]&&(!0!==a(arguments[0])?this.scroll({left:~~arguments[0].left+this.scrollLeft,top:~~arguments[0].top+this.scrollTop,behavior:arguments[0].behavior}):s.elementScroll.call(this,void 0!==arguments[0].left?~~arguments[0].left+this.scrollLeft:~~arguments[0]+this.scrollLeft,void 0!==arguments[0].top?~~arguments[0].top+this.scrollTop:~~arguments[1]+this.scrollTop))},n.prototype.scrollIntoView=function(){if(!0!==a(arguments[0])){var i=u(this),n=i.getBoundingClientRect(),o=this.getBoundingClientRect();i!==e.body?(p.call(this,i,i.scrollLeft+o.left-n.left,i.scrollTop+o.top-n.top),"fixed"!==t.getComputedStyle(i).position&&t.scrollBy({left:n.left,top:n.top,behavior:"smooth"})):t.scrollBy({left:o.left,top:o.top,behavior:"smooth"})}else s.scrollIntoView.call(this,void 0===arguments[0]||arguments[0])}}function l(t,e){this.scrollLeft=t,this.scrollTop=e}function a(t){if(null===t||"object"!=typeof t||void 0===t.behavior||"auto"===t.behavior||"instant"===t.behavior)return!0;if("object"==typeof t&&"smooth"===t.behavior)return!1;throw new TypeError("behavior member of ScrollOptions "+t.behavior+" is not a valid value for enumeration ScrollBehavior.")}function c(t,e){return"Y"===e?t.clientHeight+r<t.scrollHeight:"X"===e?t.clientWidth+r<t.scrollWidth:void 0}function h(e,i){var n=t.getComputedStyle(e,null)["overflow"+i];return"auto"===n||"scroll"===n}function d(t){var e=c(t,"Y")&&h(t,"Y"),i=c(t,"X")&&h(t,"X");return e||i}function u(t){for(;t!==e.body&&!1===d(t);)t=t.parentNode||t.host;return t}function f(e){var i,n,s,r,l=(o()-e.startTime)/468;r=l=l>1?1:l,i=.5*(1-Math.cos(Math.PI*r)),n=e.startX+(e.x-e.startX)*i,s=e.startY+(e.y-e.startY)*i,e.method.call(e.scrollable,n,s),n===e.x&&s===e.y||t.requestAnimationFrame(f.bind(t,e))}function p(i,n,r){var a,c,h,d,u=o();i===e.body?(a=t,c=t.scrollX||t.pageXOffset,h=t.scrollY||t.pageYOffset,d=s.scroll):(a=i,c=i.scrollLeft,h=i.scrollTop,d=l),f({scrollable:a,method:d,startTime:u,startX:c,startY:h,x:n,y:r})}}}}));b.polyfill;function x(t){for(var e=[];t&&t!==document;t=t.parentNode)e.push(t);return e}function k(t){var e={};if(window.getComputedStyle){var i=getComputedStyle(t),n=i.transform||i.webkitTransform||i.mozTransform,s=n.match(/^matrix3d\((.+)\)$/);return s?(e.x=s?parseFloat(s[1].split(", ")[12]):0,e.y=s?parseFloat(s[1].split(", ")[13]):0):(s=n.match(/^matrix\((.+)\)$/),e.x=s?parseFloat(s[1].split(", ")[4]):0,e.y=s?parseFloat(s[1].split(", ")[5]):0),e}}function S(t,e,i){return(1-i)*t+i*e}var E=function(e){r(s,e);var n=d(s);function s(){var e,i=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return t(this,s),(e=n.call(this,i)).resetNativeScroll&&(history.scrollRestoration&&(history.scrollRestoration="manual"),window.scrollTo(0,0)),window.addEventListener("scroll",e.checkScroll,!1),void 0===window.smoothscrollPolyfill&&(window.smoothscrollPolyfill=b,window.smoothscrollPolyfill.polyfill()),e}return i(s,[{key:"init",value:function(){this.instance.scroll.y=window.pageYOffset,this.parallaxElements={},this.sections={},this.addSections(),this.addElements(),this.detectElements(),u(l(s.prototype),"init",this).call(this)}},{key:"checkScroll",value:function(){var t=this;u(l(s.prototype),"checkScroll",this).call(this),this.getDirection&&this.addDirection(),this.getSpeed&&(this.addSpeed(),this.speedTs=Date.now()),this.instance.scroll.y=window.pageYOffset,Object.entries(this.els).length&&(this.hasScrollTicking||(requestAnimationFrame((function(){t.detectElements(),t.transformElements()})),this.hasScrollTicking=!0))}},{key:"raf",value:function(){}},{key:"addDirection",value:function(){window.pageYOffset>this.instance.scroll.y?"down"!==this.instance.direction&&(this.instance.direction="down"):window.pageYOffset<this.instance.scroll.y&&"up"!==this.instance.direction&&(this.instance.direction="up")}},{key:"addSpeed",value:function(){window.pageYOffset!=this.instance.scroll.y?this.instance.speed=(window.pageYOffset-this.instance.scroll.y)/Math.max(1,Date.now()-this.speedTs):this.instance.speed=0}},{key:"resize",value:function(){Object.entries(this.els).length&&(this.windowHeight=window.innerHeight,this.updateElements())}},{key:"addSections",value:function(){var t=this;this.sections={};var e=this.el.querySelectorAll("[data-".concat(this.name,"-section]"));0===e.length&&(e=[this.el]),e.forEach((function(e,i){var n="string"==typeof e.dataset[t.name+"Id"]?e.dataset[t.name+"Id"]:"section"+i,s=e.getBoundingClientRect(),o={x:s.left-1.5*window.innerWidth-k(e).x,y:s.top-1.5*window.innerHeight-k(e).y},r={x:o.x+s.width+2*window.innerWidth,y:o.y+s.height+2*window.innerHeight},l="string"==typeof e.dataset[t.name+"Persistent"];e.setAttribute("data-scroll-section-id",n);var a={el:e,offset:o,limit:r,inView:!1,persistent:l,id:n};t.sections[n]=a}))}},{key:"addElements",value:function(){var t=this;this.els={},this.parallaxElements={},this.el.querySelectorAll("[data-".concat(this.name,"]")).forEach((function(e,i){var n,s,o,r=x(e),l=Object.entries(t.sections).map((function(t){var e=f(t,2);e[0];return e[1]})).find((function(t){return r.includes(t.el)})),a=e.dataset[t.name+"Class"]||t.class,c="string"==typeof e.dataset[t.name+"Id"]?e.dataset[t.name+"Id"]:"el"+i,h=e.dataset[t.name+"Repeat"],d=e.dataset[t.name+"Call"],u=e.dataset[t.name+"Position"],p=e.dataset[t.name+"Delay"],m=e.dataset[t.name+"Direction"],v="string"==typeof e.dataset[t.name+"Sticky"],y=!!e.dataset[t.name+"Speed"]&&parseFloat(e.dataset[t.name+"Speed"])/10,w="string"==typeof e.dataset[t.name+"Offset"]?e.dataset[t.name+"Offset"].split(","):t.offset,g=e.dataset[t.name+"Target"],b=(o=void 0!==g?document.querySelector("".concat(g)):e).getBoundingClientRect();null===l||l.inView?(n=b.top+t.instance.scroll.y-k(o).y,s=b.left+t.instance.scroll.x-k(o).x):(n=b.top-k(l.el).y-k(o).y,s=b.left-k(l.el).x-k(o).x);var S=n+o.offsetHeight,E=s+o.offsetWidth,T={x:(E-s)/2+s,y:(S-n)/2+n};if(v){var A=e.getBoundingClientRect(),O=A.top,C=A.left,L={x:C-s,y:O-n};n+=window.innerHeight,s+=window.innerWidth,S=O+o.offsetHeight-e.offsetHeight-L[t.directionAxis],T={x:((E=C+o.offsetWidth-e.offsetWidth-L[t.directionAxis])-s)/2+s,y:(S-n)/2+n}}h="false"!=h&&(null!=h||t.repeat);var W=[0,0];if(w)if("horizontal"===t.direction){for(var H=0;H<w.length;H++)"string"==typeof w[H]?w[H].includes("%")?W[H]=parseInt(w[H].replace("%","")*t.windowWidth/100):W[H]=parseInt(w[H]):W[H]=w[H];s+=W[0],E-=W[1]}else{for(H=0;H<w.length;H++)"string"==typeof w[H]?w[H].includes("%")?W[H]=parseInt(w[H].replace("%","")*t.windowHeight/100):W[H]=parseInt(w[H]):W[H]=w[H];n+=W[0],S-=W[1]}var M={el:e,id:c,class:a,section:l,top:n,middle:T,bottom:S,left:s,right:E,offset:w,progress:0,repeat:h,inView:!1,call:d,speed:y,delay:p,position:u,targetEl:o,direction:m,sticky:v};t.els[c]=M,e.classList.contains(a)&&t.setInView(t.els[c],c),(!1!==y||v)&&(t.parallaxElements[c]=M)}))}},{key:"updateElements",value:function(){var t=this;Object.entries(this.els).forEach((function(e){var i=f(e,2),n=i[0],s=i[1],o=s.targetEl.getBoundingClientRect().top+t.instance.scroll.y,r=o+s.targetEl.offsetHeight,l=t.getRelativeOffset(s.offset);t.els[n].top=o+l[0],t.els[n].bottom=r-l[1]})),this.hasScrollTicking=!1}},{key:"getRelativeOffset",value:function(t){var e=[0,0];if(t)for(var i=0;i<t.length;i++)"string"==typeof t[i]?t[i].includes("%")?e[i]=parseInt(t[i].replace("%","")*this.windowHeight/100):e[i]=parseInt(t[i]):e[i]=t[i];return e}},{key:"transform",value:function(t,e,i,n){var s;if(n){var o=k(t),r=S(o.x,e,n),l=S(o.y,i,n);s="matrix3d(1,0,0.00,0,0.00,1,0.00,0,0,0,1,0,".concat(r,",").concat(l,",0,1)")}else s="matrix3d(1,0,0.00,0,0.00,1,0.00,0,0,0,1,0,".concat(e,",").concat(i,",0,1)");t.style.webkitTransform=s,t.style.msTransform=s,t.style.transform=s}},{key:"transformElements",value:function(t){var e=this,i=arguments.length>1&&void 0!==arguments[1]&&arguments[1],n=this.instance.scroll.x+this.windowWidth,s=this.instance.scroll.y+this.windowHeight,o={x:this.instance.scroll.x+this.windowMiddle.x,y:this.instance.scroll.y+this.windowMiddle.y};Object.entries(this.parallaxElements).forEach((function(r){var l=f(r,2),a=(l[0],l[1]),c=!1;if(t&&(c=0),a.inView||i)switch(a.position){case"top":c=e.instance.scroll[e.directionAxis]*-a.speed;break;case"elementTop":c=(s-a.top)*-a.speed;break;case"bottom":c=(e.instance.limit[e.directionAxis]-s+e.windowHeight)*a.speed;break;case"left":c=e.instance.scroll[e.directionAxis]*-a.speed;break;case"elementLeft":c=(n-a.left)*-a.speed;break;case"right":c=(e.instance.limit[e.directionAxis]-n+e.windowHeight)*a.speed;break;default:c=(o[e.directionAxis]-a.middle[e.directionAxis])*-a.speed}a.sticky&&(c=a.inView?"horizontal"===e.direction?e.instance.scroll.x-a.left+window.innerWidth:e.instance.scroll.y-a.top+window.innerHeight:"horizontal"===e.direction?e.instance.scroll.x<a.left-window.innerWidth&&e.instance.scroll.x<a.left-window.innerWidth/2?0:e.instance.scroll.x>a.right&&e.instance.scroll.x>a.right+100&&a.right-a.left+window.innerWidth:e.instance.scroll.y<a.top-window.innerHeight&&e.instance.scroll.y<a.top-window.innerHeight/2?0:e.instance.scroll.y>a.bottom&&e.instance.scroll.y>a.bottom+100&&a.bottom-a.top+window.innerHeight),!1!==c&&("horizontal"===a.direction||"horizontal"===e.direction&&"vertical"!==a.direction?e.transform(a.el,c,0,!t&&a.delay):e.transform(a.el,0,c,!t&&a.delay))}))}},{key:"scrollTo",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},i=parseInt(e.offset)||0,n=!!e.callback&&e.callback;if("string"==typeof t){if("top"===t)t=this.html;else if("bottom"===t)t=this.html.offsetHeight-window.innerHeight;else if(!(t=document.querySelector(t)))return}else if("number"==typeof t)t=parseInt(t);else if(!t||!t.tagName)return void console.warn("`target` parameter is not valid");i="number"!=typeof t?t.getBoundingClientRect().top+i+this.instance.scroll.y:t+i;var s=function(){return parseInt(window.pageYOffset)===parseInt(i)};if(n){if(s())return void n();var o=function t(){s()&&(window.removeEventListener("scroll",t),n())};window.addEventListener("scroll",o)}window.scrollTo({top:i,behavior:"smooth"})}},{key:"update",value:function(){this.addElements(),this.detectElements()}},{key:"destroy",value:function(){u(l(s.prototype),"destroy",this).call(this),window.removeEventListener("scroll",this.checkScroll,!1)}}]),s}(w),T=g((function(t,e){t.exports=function(){var t=0;function e(e){return"__private_"+t+++"_"+e}function i(t,e){if(!Object.prototype.hasOwnProperty.call(t,e))throw new TypeError("attempted to use private field on non-instance");return t}function n(){}n.prototype={on:function(t,e,i){var n=this.e||(this.e={});return(n[t]||(n[t]=[])).push({fn:e,ctx:i}),this},once:function(t,e,i){var n=this;function s(){n.off(t,s),e.apply(i,arguments)}return s._=e,this.on(t,s,i)},emit:function(t){for(var e=[].slice.call(arguments,1),i=((this.e||(this.e={}))[t]||[]).slice(),n=0,s=i.length;n<s;n++)i[n].fn.apply(i[n].ctx,e);return this},off:function(t,e){var i=this.e||(this.e={}),n=i[t],s=[];if(n&&e)for(var o=0,r=n.length;o<r;o++)n[o].fn!==e&&n[o].fn._!==e&&s.push(n[o]);return s.length?i[t]=s:delete i[t],this}};var s=n;s.TinyEmitter=n;var o,r="virtualscroll",l=e("options"),a=e("el"),c=e("emitter"),h=e("event"),d=e("touchStart"),u=e("bodyTouchAction");return function(){function t(t){var e=this;Object.defineProperty(this,l,{writable:!0,value:void 0}),Object.defineProperty(this,a,{writable:!0,value:void 0}),Object.defineProperty(this,c,{writable:!0,value:void 0}),Object.defineProperty(this,h,{writable:!0,value:void 0}),Object.defineProperty(this,d,{writable:!0,value:void 0}),Object.defineProperty(this,u,{writable:!0,value:void 0}),this._onWheel=function(t){var n=i(e,l)[l],s=i(e,h)[h];s.deltaX=t.wheelDeltaX||-1*t.deltaX,s.deltaY=t.wheelDeltaY||-1*t.deltaY,o.isFirefox&&1===t.deltaMode&&(s.deltaX*=n.firefoxMultiplier,s.deltaY*=n.firefoxMultiplier),s.deltaX*=n.mouseMultiplier,s.deltaY*=n.mouseMultiplier,e._notify(t)},this._onMouseWheel=function(t){var n=i(e,h)[h];n.deltaX=t.wheelDeltaX?t.wheelDeltaX:0,n.deltaY=t.wheelDeltaY?t.wheelDeltaY:t.wheelDelta,e._notify(t)},this._onTouchStart=function(t){var n=t.targetTouches?t.targetTouches[0]:t;i(e,d)[d].x=n.pageX,i(e,d)[d].y=n.pageY},this._onTouchMove=function(t){var n=i(e,l)[l];n.preventTouch&&!t.target.classList.contains(n.unpreventTouchClass)&&t.preventDefault();var s=i(e,h)[h],o=t.targetTouches?t.targetTouches[0]:t;s.deltaX=(o.pageX-i(e,d)[d].x)*n.touchMultiplier,s.deltaY=(o.pageY-i(e,d)[d].y)*n.touchMultiplier,i(e,d)[d].x=o.pageX,i(e,d)[d].y=o.pageY,e._notify(t)},this._onKeyDown=function(t){var n=i(e,h)[h];n.deltaX=n.deltaY=0;var s=window.innerHeight-40;switch(t.keyCode){case 37:case 38:n.deltaY=i(e,l)[l].keyStep;break;case 39:case 40:n.deltaY=-i(e,l)[l].keyStep;break;case 32:n.deltaY=s*(t.shiftKey?1:-1);break;default:return}e._notify(t)},i(this,a)[a]=window,t&&t.el&&(i(this,a)[a]=t.el,delete t.el),o||(o={hasWheelEvent:"onwheel"in document,hasMouseWheelEvent:"onmousewheel"in document,hasTouch:"ontouchstart"in document,hasTouchWin:navigator.msMaxTouchPoints&&navigator.msMaxTouchPoints>1,hasPointer:!!window.navigator.msPointerEnabled,hasKeyDown:"onkeydown"in document,isFirefox:navigator.userAgent.indexOf("Firefox")>-1}),i(this,l)[l]=Object.assign({mouseMultiplier:1,touchMultiplier:2,firefoxMultiplier:15,keyStep:120,preventTouch:!1,unpreventTouchClass:"vs-touchmove-allowed",useKeyboard:!0,useTouch:!0},t),i(this,c)[c]=new s,i(this,h)[h]={y:0,x:0,deltaX:0,deltaY:0},i(this,d)[d]={x:null,y:null},i(this,u)[u]=null,void 0!==i(this,l)[l].passive&&(this.listenerOptions={passive:i(this,l)[l].passive})}var e=t.prototype;return e._notify=function(t){var e=i(this,h)[h];e.x+=e.deltaX,e.y+=e.deltaY,i(this,c)[c].emit(r,{x:e.x,y:e.y,deltaX:e.deltaX,deltaY:e.deltaY,originalEvent:t})},e._bind=function(){o.hasWheelEvent&&i(this,a)[a].addEventListener("wheel",this._onWheel,this.listenerOptions),o.hasMouseWheelEvent&&i(this,a)[a].addEventListener("mousewheel",this._onMouseWheel,this.listenerOptions),o.hasTouch&&i(this,l)[l].useTouch&&(i(this,a)[a].addEventListener("touchstart",this._onTouchStart,this.listenerOptions),i(this,a)[a].addEventListener("touchmove",this._onTouchMove,this.listenerOptions)),o.hasPointer&&o.hasTouchWin&&(i(this,u)[u]=document.body.style.msTouchAction,document.body.style.msTouchAction="none",i(this,a)[a].addEventListener("MSPointerDown",this._onTouchStart,!0),i(this,a)[a].addEventListener("MSPointerMove",this._onTouchMove,!0)),o.hasKeyDown&&i(this,l)[l].useKeyboard&&document.addEventListener("keydown",this._onKeyDown)},e._unbind=function(){o.hasWheelEvent&&i(this,a)[a].removeEventListener("wheel",this._onWheel),o.hasMouseWheelEvent&&i(this,a)[a].removeEventListener("mousewheel",this._onMouseWheel),o.hasTouch&&(i(this,a)[a].removeEventListener("touchstart",this._onTouchStart),i(this,a)[a].removeEventListener("touchmove",this._onTouchMove)),o.hasPointer&&o.hasTouchWin&&(document.body.style.msTouchAction=i(this,u)[u],i(this,a)[a].removeEventListener("MSPointerDown",this._onTouchStart,!0),i(this,a)[a].removeEventListener("MSPointerMove",this._onTouchMove,!0)),o.hasKeyDown&&i(this,l)[l].useKeyboard&&document.removeEventListener("keydown",this._onKeyDown)},e.on=function(t,e){i(this,c)[c].on(r,t,e);var n=i(this,c)[c].e;n&&n[r]&&1===n[r].length&&this._bind()},e.off=function(t,e){i(this,c)[c].off(r,t,e);var n=i(this,c)[c].e;(!n[r]||n[r].length<=0)&&this._unbind()},e.destroy=function(){i(this,c)[c].off(),this._unbind()},t}()}()})),A="function"==typeof Float32Array;function O(t,e){return 1-3*e+3*t}function C(t,e){return 3*e-6*t}function L(t){return 3*t}function W(t,e,i){return((O(e,i)*t+C(e,i))*t+L(e))*t}function H(t,e,i){return 3*O(e,i)*t*t+2*C(e,i)*t+L(e)}function M(t){return t}var B=function(t,e,i,n){if(!(0<=t&&t<=1&&0<=i&&i<=1))throw new Error("bezier x values must be in [0, 1] range");if(t===e&&i===n)return M;for(var s=A?new Float32Array(11):new Array(11),o=0;o<11;++o)s[o]=W(.1*o,t,i);function r(e){for(var n=0,o=1;10!==o&&s[o]<=e;++o)n+=.1;--o;var r=n+.1*((e-s[o])/(s[o+1]-s[o])),l=H(r,t,i);return l>=.001?function(t,e,i,n){for(var s=0;s<4;++s){var o=H(e,i,n);if(0===o)return e;e-=(W(e,i,n)-t)/o}return e}(e,r,t,i):0===l?r:function(t,e,i,n,s){var o,r,l=0;do{(o=W(r=e+(i-e)/2,n,s)-t)>0?i=r:e=r}while(Math.abs(o)>1e-7&&++l<10);return r}(e,n,n+.1,t,i)}return function(t){return 0===t?0:1===t?1:W(r(t),e,n)}},j=38,D=40,R=32,P=9,I=33,_=34,z=36,Y=35,V=function(e){r(s,e);var n=d(s);function s(){var e,i=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return t(this,s),history.scrollRestoration&&(history.scrollRestoration="manual"),window.scrollTo(0,0),(e=n.call(this,i)).inertia&&(e.lerp=.1*e.inertia),e.isScrolling=!1,e.isDraggingScrollbar=!1,e.isTicking=!1,e.hasScrollTicking=!1,e.parallaxElements={},e.stop=!1,e.scrollbarContainer=i.scrollbarContainer,e.checkKey=e.checkKey.bind(c(e)),window.addEventListener("keydown",e.checkKey,!1),e}return i(s,[{key:"init",value:function(){var t=this;this.html.classList.add(this.smoothClass),this.html.setAttribute("data-".concat(this.name,"-direction"),this.direction),this.instance=o({delta:{x:this.initPosition.x,y:this.initPosition.y},scroll:{x:this.initPosition.x,y:this.initPosition.y}},this.instance),this.vs=new T({el:this.scrollFromAnywhere?document:this.el,mouseMultiplier:navigator.platform.indexOf("Win")>-1?1:.4,firefoxMultiplier:this.firefoxMultiplier,touchMultiplier:this.touchMultiplier,useKeyboard:!1,passive:!0}),this.vs.on((function(e){t.stop||t.isDraggingScrollbar||requestAnimationFrame((function(){t.updateDelta(e),t.isScrolling||t.startScrolling()}))})),this.setScrollLimit(),this.initScrollBar(),this.addSections(),this.addElements(),this.checkScroll(!0),this.transformElements(!0,!0),u(l(s.prototype),"init",this).call(this)}},{key:"setScrollLimit",value:function(){if(this.instance.limit.y=this.el.offsetHeight-this.windowHeight,"horizontal"===this.direction){for(var t=0,e=this.el.children,i=0;i<e.length;i++)t+=e[i].offsetWidth;this.instance.limit.x=t-this.windowWidth}}},{key:"startScrolling",value:function(){this.startScrollTs=Date.now(),this.isScrolling=!0,this.html.classList.add(this.scrollingClass)}},{key:"stopScrolling",value:function(){this.scrollToRaf&&(cancelAnimationFrame(this.scrollToRaf),this.scrollToRaf=null),this.isScrolling=!1,this.instance.scroll.y=Math.round(this.instance.scroll.y),this.html.classList.remove(this.scrollingClass)}},{key:"checkKey",value:function(t){var e=this;if(this.stop)t.keyCode==P&&requestAnimationFrame((function(){e.html.scrollTop=0,document.body.scrollTop=0,e.html.scrollLeft=0,document.body.scrollLeft=0}));else{switch(t.keyCode){case P:requestAnimationFrame((function(){e.html.scrollTop=0,document.body.scrollTop=0,e.html.scrollLeft=0,document.body.scrollLeft=0,e.scrollTo(document.activeElement,{offset:-window.innerHeight/2})}));break;case j:this.instance.delta[this.directionAxis]-=240;break;case D:this.instance.delta[this.directionAxis]+=240;break;case I:this.instance.delta[this.directionAxis]-=window.innerHeight;break;case _:this.instance.delta[this.directionAxis]+=window.innerHeight;break;case z:this.instance.delta[this.directionAxis]-=this.instance.limit[this.directionAxis];break;case Y:this.instance.delta[this.directionAxis]+=this.instance.limit[this.directionAxis];break;case R:document.activeElement instanceof HTMLInputElement||document.activeElement instanceof HTMLTextAreaElement||(t.shiftKey?this.instance.delta[this.directionAxis]-=window.innerHeight:this.instance.delta[this.directionAxis]+=window.innerHeight);break;default:return}this.instance.delta[this.directionAxis]<0&&(this.instance.delta[this.directionAxis]=0),this.instance.delta[this.directionAxis]>this.instance.limit[this.directionAxis]&&(this.instance.delta[this.directionAxis]=this.instance.limit[this.directionAxis]),this.stopScrolling(),this.isScrolling=!0,this.html.classList.add(this.scrollingClass)}}},{key:"raf",value:function(){this.checkScroll()}},{key:"checkScroll",value:function(){var t=this,e=arguments.length>0&&void 0!==arguments[0]&&arguments[0];if(e||this.isScrolling||this.isDraggingScrollbar){this.updateScroll();var i=Math.abs(this.instance.delta[this.directionAxis]-this.instance.scroll[this.directionAxis]),n=Date.now()-this.startScrollTs;if(!this.animatingScroll&&n>100&&(i<.5&&0!=this.instance.delta[this.directionAxis]||i<.5&&0==this.instance.delta[this.directionAxis])&&this.stopScrolling(),Object.entries(this.sections).forEach((function(i){var n=f(i,2),s=(n[0],n[1]);s.persistent||t.instance.scroll[t.directionAxis]>s.offset[t.directionAxis]&&t.instance.scroll[t.directionAxis]<s.limit[t.directionAxis]?("horizontal"===t.direction?t.transform(s.el,-t.instance.scroll[t.directionAxis],0):t.transform(s.el,0,-t.instance.scroll[t.directionAxis]),s.inView||(s.inView=!0,s.el.style.opacity=1,s.el.style.pointerEvents="all",s.el.setAttribute("data-".concat(t.name,"-section-inview"),""))):((s.inView||e)&&(s.inView=!1,s.el.style.opacity=0,s.el.style.pointerEvents="none",s.el.removeAttribute("data-".concat(t.name,"-section-inview"))),t.transform(s.el,0,0))})),this.getDirection&&this.addDirection(),this.getSpeed&&(this.addSpeed(),this.speedTs=Date.now()),this.detectElements(),this.transformElements(),this.hasScrollbar){var o=this.instance.scroll[this.directionAxis]/this.instance.limit[this.directionAxis]*this.scrollBarLimit[this.directionAxis];"horizontal"===this.direction?this.transform(this.scrollbarThumb,o,0):this.transform(this.scrollbarThumb,0,o)}u(l(s.prototype),"checkScroll",this).call(this)}}},{key:"resize",value:function(){this.windowHeight=window.innerHeight,this.windowWidth=window.innerWidth,this.checkContext(),this.windowMiddle={x:this.windowWidth/2,y:this.windowHeight/2},this.update()}},{key:"updateDelta",value:function(t){var e,i=this[this.context]&&this[this.context].gestureDirection?this[this.context].gestureDirection:this.gestureDirection;e="both"===i?t.deltaX+t.deltaY:"vertical"===i?t.deltaY:"horizontal"===i?t.deltaX:t.deltaY,this.instance.delta[this.directionAxis]-=e*this.multiplier,this.instance.delta[this.directionAxis]<0&&(this.instance.delta[this.directionAxis]=0),this.instance.delta[this.directionAxis]>this.instance.limit[this.directionAxis]&&(this.instance.delta[this.directionAxis]=this.instance.limit[this.directionAxis])}},{key:"updateScroll",value:function(t){this.isScrolling||this.isDraggingScrollbar?this.instance.scroll[this.directionAxis]=S(this.instance.scroll[this.directionAxis],this.instance.delta[this.directionAxis],this.lerp):this.instance.scroll[this.directionAxis]>this.instance.limit[this.directionAxis]?this.setScroll(this.instance.scroll[this.directionAxis],this.instance.limit[this.directionAxis]):this.instance.scroll.y<0?this.setScroll(this.instance.scroll[this.directionAxis],0):this.setScroll(this.instance.scroll[this.directionAxis],this.instance.delta[this.directionAxis])}},{key:"addDirection",value:function(){this.instance.delta.y>this.instance.scroll.y?"down"!==this.instance.direction&&(this.instance.direction="down"):this.instance.delta.y<this.instance.scroll.y&&"up"!==this.instance.direction&&(this.instance.direction="up"),this.instance.delta.x>this.instance.scroll.x?"right"!==this.instance.direction&&(this.instance.direction="right"):this.instance.delta.x<this.instance.scroll.x&&"left"!==this.instance.direction&&(this.instance.direction="left")}},{key:"addSpeed",value:function(){this.instance.delta[this.directionAxis]!=this.instance.scroll[this.directionAxis]?this.instance.speed=(this.instance.delta[this.directionAxis]-this.instance.scroll[this.directionAxis])/Math.max(1,Date.now()-this.speedTs):this.instance.speed=0}},{key:"initScrollBar",value:function(){if(this.scrollbar=document.createElement("span"),this.scrollbarThumb=document.createElement("span"),this.scrollbar.classList.add("".concat(this.scrollbarClass)),this.scrollbarThumb.classList.add("".concat(this.scrollbarClass,"_thumb")),this.scrollbar.append(this.scrollbarThumb),this.scrollbarContainer?this.scrollbarContainer.append(this.scrollbar):document.body.append(this.scrollbar),this.getScrollBar=this.getScrollBar.bind(this),this.releaseScrollBar=this.releaseScrollBar.bind(this),this.moveScrollBar=this.moveScrollBar.bind(this),this.scrollbarThumb.addEventListener("mousedown",this.getScrollBar),window.addEventListener("mouseup",this.releaseScrollBar),window.addEventListener("mousemove",this.moveScrollBar),this.hasScrollbar=!1,"horizontal"==this.direction){if(this.instance.limit.x+this.windowWidth<=this.windowWidth)return}else if(this.instance.limit.y+this.windowHeight<=this.windowHeight)return;this.hasScrollbar=!0,this.scrollbarBCR=this.scrollbar.getBoundingClientRect(),this.scrollbarHeight=this.scrollbarBCR.height,this.scrollbarWidth=this.scrollbarBCR.width,"horizontal"===this.direction?this.scrollbarThumb.style.width="".concat(this.scrollbarWidth*this.scrollbarWidth/(this.instance.limit.x+this.scrollbarWidth),"px"):this.scrollbarThumb.style.height="".concat(this.scrollbarHeight*this.scrollbarHeight/(this.instance.limit.y+this.scrollbarHeight),"px"),this.scrollbarThumbBCR=this.scrollbarThumb.getBoundingClientRect(),this.scrollBarLimit={x:this.scrollbarWidth-this.scrollbarThumbBCR.width,y:this.scrollbarHeight-this.scrollbarThumbBCR.height}}},{key:"reinitScrollBar",value:function(){if(this.hasScrollbar=!1,"horizontal"==this.direction){if(this.instance.limit.x+this.windowWidth<=this.windowWidth)return}else if(this.instance.limit.y+this.windowHeight<=this.windowHeight)return;this.hasScrollbar=!0,this.scrollbarBCR=this.scrollbar.getBoundingClientRect(),this.scrollbarHeight=this.scrollbarBCR.height,this.scrollbarWidth=this.scrollbarBCR.width,"horizontal"===this.direction?this.scrollbarThumb.style.width="".concat(this.scrollbarWidth*this.scrollbarWidth/(this.instance.limit.x+this.scrollbarWidth),"px"):this.scrollbarThumb.style.height="".concat(this.scrollbarHeight*this.scrollbarHeight/(this.instance.limit.y+this.scrollbarHeight),"px"),this.scrollbarThumbBCR=this.scrollbarThumb.getBoundingClientRect(),this.scrollBarLimit={x:this.scrollbarWidth-this.scrollbarThumbBCR.width,y:this.scrollbarHeight-this.scrollbarThumbBCR.height}}},{key:"destroyScrollBar",value:function(){this.scrollbarThumb.removeEventListener("mousedown",this.getScrollBar),window.removeEventListener("mouseup",this.releaseScrollBar),window.removeEventListener("mousemove",this.moveScrollBar),this.scrollbar.remove()}},{key:"getScrollBar",value:function(t){this.isDraggingScrollbar=!0,this.html.classList.remove(this.scrollingClass),this.html.classList.add(this.draggingClass)}},{key:"releaseScrollBar",value:function(t){this.isDraggingScrollbar=!1,this.html.classList.add(this.scrollingClass),this.html.classList.remove(this.draggingClass)}},{key:"moveScrollBar",value:function(t){var e=this;this.isDraggingScrollbar&&requestAnimationFrame((function(){var i=100*(t.clientX-e.scrollbarBCR.left)/e.scrollbarWidth*e.instance.limit.x/100,n=100*(t.clientY-e.scrollbarBCR.top)/e.scrollbarHeight*e.instance.limit.y/100;n>0&&n<e.instance.limit.y&&(e.instance.delta.y=n),i>0&&i<e.instance.limit.x&&(e.instance.delta.x=i)}))}},{key:"addElements",value:function(){var t=this;this.els={},this.parallaxElements={},this.el.querySelectorAll("[data-".concat(this.name,"]")).forEach((function(e,i){var n,s,o,r=x(e),l=Object.entries(t.sections).map((function(t){var e=f(t,2);e[0];return e[1]})).find((function(t){return r.includes(t.el)})),a=e.dataset[t.name+"Class"]||t.class,c="string"==typeof e.dataset[t.name+"Id"]?e.dataset[t.name+"Id"]:"el"+i,h=e.dataset[t.name+"Repeat"],d=e.dataset[t.name+"Call"],u=e.dataset[t.name+"Position"],p=e.dataset[t.name+"Delay"],m=e.dataset[t.name+"Direction"],v="string"==typeof e.dataset[t.name+"Sticky"],y=!!e.dataset[t.name+"Speed"]&&parseFloat(e.dataset[t.name+"Speed"])/10,w="string"==typeof e.dataset[t.name+"Offset"]?e.dataset[t.name+"Offset"].split(","):t.offset,g=e.dataset[t.name+"Target"],b=(o=void 0!==g?document.querySelector("".concat(g)):e).getBoundingClientRect();null===l||l.inView?(n=b.top+t.instance.scroll.y-k(o).y,s=b.left+t.instance.scroll.x-k(o).x):(n=b.top-k(l.el).y-k(o).y,s=b.left-k(l.el).x-k(o).x);var S=n+o.offsetHeight,E=s+o.offsetWidth,T={x:(E-s)/2+s,y:(S-n)/2+n};if(v){var A=e.getBoundingClientRect(),O=A.top,C=A.left,L={x:C-s,y:O-n};n+=window.innerHeight,s+=window.innerWidth,S=O+o.offsetHeight-e.offsetHeight-L[t.directionAxis],T={x:((E=C+o.offsetWidth-e.offsetWidth-L[t.directionAxis])-s)/2+s,y:(S-n)/2+n}}h="false"!=h&&(null!=h||t.repeat);var W=[0,0];if(w)if("horizontal"===t.direction){for(var H=0;H<w.length;H++)"string"==typeof w[H]?w[H].includes("%")?W[H]=parseInt(w[H].replace("%","")*t.windowWidth/100):W[H]=parseInt(w[H]):W[H]=w[H];s+=W[0],E-=W[1]}else{for(H=0;H<w.length;H++)"string"==typeof w[H]?w[H].includes("%")?W[H]=parseInt(w[H].replace("%","")*t.windowHeight/100):W[H]=parseInt(w[H]):W[H]=w[H];n+=W[0],S-=W[1]}var M={el:e,id:c,class:a,section:l,top:n,middle:T,bottom:S,left:s,right:E,offset:w,progress:0,repeat:h,inView:!1,call:d,speed:y,delay:p,position:u,target:o,direction:m,sticky:v};t.els[c]=M,e.classList.contains(a)&&t.setInView(t.els[c],c),(!1!==y||v)&&(t.parallaxElements[c]=M)}))}},{key:"addSections",value:function(){var t=this;this.sections={};var e=this.el.querySelectorAll("[data-".concat(this.name,"-section]"));0===e.length&&(e=[this.el]),e.forEach((function(e,i){var n="string"==typeof e.dataset[t.name+"Id"]?e.dataset[t.name+"Id"]:"section"+i,s=e.getBoundingClientRect(),o={x:s.left-1.5*window.innerWidth-k(e).x,y:s.top-1.5*window.innerHeight-k(e).y},r={x:o.x+s.width+2*window.innerWidth,y:o.y+s.height+2*window.innerHeight},l="string"==typeof e.dataset[t.name+"Persistent"];e.setAttribute("data-scroll-section-id",n);var a={el:e,offset:o,limit:r,inView:!1,persistent:l,id:n};t.sections[n]=a}))}},{key:"transform",value:function(t,e,i,n){var s;if(n){var o=k(t),r=S(o.x,e,n),l=S(o.y,i,n);s="matrix3d(1,0,0.00,0,0.00,1,0.00,0,0,0,1,0,".concat(r,",").concat(l,",0,1)")}else s="matrix3d(1,0,0.00,0,0.00,1,0.00,0,0,0,1,0,".concat(e,",").concat(i,",0,1)");t.style.webkitTransform=s,t.style.msTransform=s,t.style.transform=s}},{key:"transformElements",value:function(t){var e=this,i=arguments.length>1&&void 0!==arguments[1]&&arguments[1],n=this.instance.scroll.x+this.windowWidth,s=this.instance.scroll.y+this.windowHeight,o={x:this.instance.scroll.x+this.windowMiddle.x,y:this.instance.scroll.y+this.windowMiddle.y};Object.entries(this.parallaxElements).forEach((function(r){var l=f(r,2),a=(l[0],l[1]),c=!1;if(t&&(c=0),a.inView||i)switch(a.position){case"top":c=e.instance.scroll[e.directionAxis]*-a.speed;break;case"elementTop":c=(s-a.top)*-a.speed;break;case"bottom":c=(e.instance.limit[e.directionAxis]-s+e.windowHeight)*a.speed;break;case"left":c=e.instance.scroll[e.directionAxis]*-a.speed;break;case"elementLeft":c=(n-a.left)*-a.speed;break;case"right":c=(e.instance.limit[e.directionAxis]-n+e.windowHeight)*a.speed;break;default:c=(o[e.directionAxis]-a.middle[e.directionAxis])*-a.speed}a.sticky&&(c=a.inView?"horizontal"===e.direction?e.instance.scroll.x-a.left+window.innerWidth:e.instance.scroll.y-a.top+window.innerHeight:"horizontal"===e.direction?e.instance.scroll.x<a.left-window.innerWidth&&e.instance.scroll.x<a.left-window.innerWidth/2?0:e.instance.scroll.x>a.right&&e.instance.scroll.x>a.right+100&&a.right-a.left+window.innerWidth:e.instance.scroll.y<a.top-window.innerHeight&&e.instance.scroll.y<a.top-window.innerHeight/2?0:e.instance.scroll.y>a.bottom&&e.instance.scroll.y>a.bottom+100&&a.bottom-a.top+window.innerHeight),!1!==c&&("horizontal"===a.direction||"horizontal"===e.direction&&"vertical"!==a.direction?e.transform(a.el,c,0,!t&&a.delay):e.transform(a.el,0,c,!t&&a.delay))}))}},{key:"scrollTo",value:function(t){var e=this,i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=parseInt(i.offset)||0,s=isNaN(parseInt(i.duration))?1e3:parseInt(i.duration),o=i.easing||[.25,0,.35,1],r=!!i.disableLerp,l=!!i.callback&&i.callback;if(o=B.apply(void 0,p(o)),"string"==typeof t){if("top"===t)t=0;else if("bottom"===t)t=this.instance.limit.y;else if("left"===t)t=0;else if("right"===t)t=this.instance.limit.x;else if(!(t=document.querySelector(t)))return}else if("number"==typeof t)t=parseInt(t);else if(!t||!t.tagName)return void console.warn("`target` parameter is not valid");if("number"!=typeof t){var a=x(t).includes(this.el);if(!a)return;var c=t.getBoundingClientRect(),h=c.top,d=c.left,u=x(t),m=u.find((function(t){return Object.entries(e.sections).map((function(t){var e=f(t,2);e[0];return e[1]})).find((function(e){return e.el==t}))})),v=0;v=m?k(m)[this.directionAxis]:-this.instance.scroll[this.directionAxis],n="horizontal"===this.direction?d+n-v:h+n-v}else n=t+n;var y=parseFloat(this.instance.delta[this.directionAxis]),w=Math.max(0,Math.min(n,this.instance.limit[this.directionAxis])),g=w-y,b=function(t){r?"horizontal"===e.direction?e.setScroll(y+g*t,e.instance.delta.y):e.setScroll(e.instance.delta.x,y+g*t):e.instance.delta[e.directionAxis]=y+g*t};this.animatingScroll=!0,this.stopScrolling(),this.startScrolling();var S=Date.now(),E=function t(){var i=(Date.now()-S)/s;i>1?(b(1),e.animatingScroll=!1,0==s&&e.update(),l&&l()):(e.scrollToRaf=requestAnimationFrame(t),b(o(i)))};E()}},{key:"update",value:function(){this.setScrollLimit(),this.addSections(),this.addElements(),this.detectElements(),this.updateScroll(),this.transformElements(!0),this.reinitScrollBar(),this.checkScroll(!0)}},{key:"startScroll",value:function(){this.stop=!1}},{key:"stopScroll",value:function(){this.stop=!0}},{key:"setScroll",value:function(t,e){this.instance=o(o({},this.instance),{},{scroll:{x:t,y:e},delta:{x:t,y:e},speed:0})}},{key:"destroy",value:function(){u(l(s.prototype),"destroy",this).call(this),this.stopScrolling(),this.html.classList.remove(this.smoothClass),this.vs.destroy(),this.destroyScrollBar(),window.removeEventListener("keydown",this.checkKey,!1)}}]),s}(w);return function(){function e(){var i=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};t(this,e),this.options=i;var n=y();Object.assign(this,n,i),this.smartphone=n.smartphone,i.smartphone&&Object.assign(this.smartphone,i.smartphone),this.tablet=n.tablet,i.tablet&&Object.assign(this.tablet,i.tablet),this.smooth||"horizontal"!=this.direction||console.warn("🚨 `smooth:false` & `horizontal` direction are not yet compatible"),this.tablet.smooth||"horizontal"!=this.tablet.direction||console.warn("🚨 `smooth:false` & `horizontal` direction are not yet compatible (tablet)"),this.smartphone.smooth||"horizontal"!=this.smartphone.direction||console.warn("🚨 `smooth:false` & `horizontal` direction are not yet compatible (smartphone)"),this.init()}return i(e,[{key:"init",value:function(){var t=this;if(this.options.isMobile=/Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)||"MacIntel"===navigator.platform&&navigator.maxTouchPoints>1||window.innerWidth<this.tablet.breakpoint,this.options.isTablet=this.options.isMobile&&window.innerWidth>=this.tablet.breakpoint,this.smooth&&!this.options.isMobile||this.tablet.smooth&&this.options.isTablet||this.smartphone.smooth&&this.options.isMobile&&!this.options.isTablet?this.scroll=new V(this.options):this.scroll=new E(this.options),this.scroll.init(),window.location.hash){var e=window.location.hash.slice(1,window.location.hash.length),i=document.getElementById(e);i&&this.scroll.scrollTo(i)}this.autoRaf&&requestAnimationFrame((function(){return t.raf()}))}},{key:"raf",value:function(){var t,e=this;null===(t=this.scroll)||void 0===t||t.raf(),this.autoRaf&&requestAnimationFrame((function(){return e.raf()}))}},{key:"update",value:function(){this.scroll.update()}},{key:"start",value:function(){this.scroll.startScroll()}},{key:"stop",value:function(){this.scroll.stopScroll()}},{key:"scrollTo",value:function(t,e){this.scroll.scrollTo(t,e)}},{key:"setScroll",value:function(t,e){this.scroll.setScroll(t,e)}},{key:"on",value:function(t,e){this.scroll.setEvents(t,e)}},{key:"off",value:function(t,e){this.scroll.unsetEvents(t,e)}},{key:"destroy",value:function(){this.scroll.destroy()}}]),e}()})); | ||
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).LocomotiveScroll=e()}(this,(function(){"use strict";function t(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function e(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}function i(t,i,n){return i&&e(t.prototype,i),n&&e(t,n),t}function n(t,e,i){return e in t?Object.defineProperty(t,e,{value:i,enumerable:!0,configurable:!0,writable:!0}):t[e]=i,t}function s(t,e){var i=Object.keys(t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(t);e&&(n=n.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),i.push.apply(i,n)}return i}function o(t){for(var e=1;e<arguments.length;e++){var i=null!=arguments[e]?arguments[e]:{};e%2?s(Object(i),!0).forEach((function(e){n(t,e,i[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(i)):s(Object(i)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(i,e))}))}return t}function r(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&a(t,e)}function l(t){return(l=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}function a(t,e){return(a=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}function c(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}function h(t,e){return!e||"object"!=typeof e&&"function"!=typeof e?c(t):e}function d(t){var e=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],(function(){}))),!0}catch(t){return!1}}();return function(){var i,n=l(t);if(e){var s=l(this).constructor;i=Reflect.construct(n,arguments,s)}else i=n.apply(this,arguments);return h(this,i)}}function u(t,e,i){return(u="undefined"!=typeof Reflect&&Reflect.get?Reflect.get:function(t,e,i){var n=function(t,e){for(;!Object.prototype.hasOwnProperty.call(t,e)&&null!==(t=l(t)););return t}(t,e);if(n){var s=Object.getOwnPropertyDescriptor(n,e);return s.get?s.get.call(i):s.value}})(t,e,i||t)}function f(t,e){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){if("undefined"==typeof Symbol||!(Symbol.iterator in Object(t)))return;var i=[],n=!0,s=!1,o=void 0;try{for(var r,l=t[Symbol.iterator]();!(n=(r=l.next()).done)&&(i.push(r.value),!e||i.length!==e);n=!0);}catch(t){s=!0,o=t}finally{try{n||null==l.return||l.return()}finally{if(s)throw o}}return i}(t,e)||m(t,e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function p(t){return function(t){if(Array.isArray(t))return v(t)}(t)||function(t){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(t))return Array.from(t)}(t)||m(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function m(t,e){if(t){if("string"==typeof t)return v(t,e);var i=Object.prototype.toString.call(t).slice(8,-1);return"Object"===i&&t.constructor&&(i=t.constructor.name),"Map"===i||"Set"===i?Array.from(t):"Arguments"===i||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(i)?v(t,e):void 0}}function v(t,e){(null==e||e>t.length)&&(e=t.length);for(var i=0,n=new Array(e);i<e;i++)n[i]=t[i];return n}function y(){return{el:document,name:"scroll",offset:[0,0],repeat:!1,smooth:!1,initPosition:{x:0,y:0},direction:"vertical",gestureDirection:"vertical",reloadOnContextChange:!1,lerp:.1,class:"is-inview",scrollbarContainer:!1,scrollbarClass:"c-scrollbar",scrollingClass:"has-scroll-scrolling",draggingClass:"has-scroll-dragging",smoothClass:"has-scroll-smooth",initClass:"has-scroll-init",getSpeed:!1,getDirection:!1,scrollFromAnywhere:!1,multiplier:1,firefoxMultiplier:50,touchMultiplier:2,resetNativeScroll:!0,autoRaf:!0,tablet:{smooth:!1,direction:"vertical",gestureDirection:"vertical",breakpoint:1024},smartphone:{smooth:!1,direction:"vertical",gestureDirection:"vertical"}}}var w=function(){function e(){var i=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};t(this,e);var n=y();Object.assign(this,n,i),this.smartphone=n.smartphone,i.smartphone&&Object.assign(this.smartphone,i.smartphone),this.tablet=n.tablet,i.tablet&&Object.assign(this.tablet,i.tablet),this.namespace="locomotive",this.html=document.documentElement,this.windowHeight=window.innerHeight,this.windowWidth=window.innerWidth,this.windowMiddle={x:this.windowWidth/2,y:this.windowHeight/2},this.els={},this.currentElements={},this.listeners={},this.hasScrollTicking=!1,this.hasCallEventSet=!1,this.checkScroll=this.checkScroll.bind(this),this.checkResize=this.checkResize.bind(this),this.checkEvent=this.checkEvent.bind(this),this.instance={scroll:{x:0,y:0},limit:{x:this.html.offsetWidth-this.windowWidth,y:this.html.offsetHeight-this.windowHeight},currentElements:this.currentElements},this.isMobile?this.isTablet?this.context="tablet":this.context="smartphone":this.context="desktop",this.isMobile&&(this.direction=this[this.context].direction),"horizontal"===this.direction?this.directionAxis="x":this.directionAxis="y",this.getDirection&&(this.instance.direction=null),this.getDirection&&(this.instance.speed=0),this.html.classList.add(this.initClass),window.addEventListener("resize",this.checkResize,!1)}return i(e,[{key:"init",value:function(){this.initEvents()}},{key:"checkScroll",value:function(){this.dispatchScroll()}},{key:"checkResize",value:function(){var t=this;this.resizeTick||(this.resizeTick=!0,requestAnimationFrame((function(){t.resize(),t.resizeTick=!1})))}},{key:"resize",value:function(){}},{key:"checkContext",value:function(){if(this.reloadOnContextChange){this.isMobile=/Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)||"MacIntel"===navigator.platform&&navigator.maxTouchPoints>1||this.windowWidth<this.tablet.breakpoint,this.isTablet=this.isMobile&&this.windowWidth>=this.tablet.breakpoint;var t=this.context;if(this.isMobile?this.isTablet?this.context="tablet":this.context="smartphone":this.context="desktop",t!=this.context)("desktop"==t?this.smooth:this[t].smooth)!=("desktop"==this.context?this.smooth:this[this.context].smooth)&&window.location.reload()}}},{key:"initEvents",value:function(){var t=this;this.scrollToEls=this.el.querySelectorAll("[data-".concat(this.name,"-to]")),this.setScrollTo=this.setScrollTo.bind(this),this.scrollToEls.forEach((function(e){e.addEventListener("click",t.setScrollTo,!1)}))}},{key:"setScrollTo",value:function(t){t.preventDefault(),this.scrollTo(t.currentTarget.getAttribute("data-".concat(this.name,"-href"))||t.currentTarget.getAttribute("href"),{offset:t.currentTarget.getAttribute("data-".concat(this.name,"-offset"))})}},{key:"addElements",value:function(){}},{key:"detectElements",value:function(t){var e=this,i=this.instance.scroll.y,n=i+this.windowHeight,s=this.instance.scroll.x,o=s+this.windowWidth;Object.entries(this.els).forEach((function(r){var l=f(r,2),a=l[0],c=l[1];if(!c||c.inView&&!t||("horizontal"===e.direction?o>=c.left&&s<c.right&&e.setInView(c,a):n>=c.top&&i<c.bottom&&e.setInView(c,a)),c&&c.inView)if("horizontal"===e.direction){var h=c.right-c.left;c.progress=(e.instance.scroll.x-(c.left-e.windowWidth))/(h+e.windowWidth),(o<c.left||s>c.right)&&e.setOutOfView(c,a)}else{var d=c.bottom-c.top;c.progress=(e.instance.scroll.y-(c.top-e.windowHeight))/(d+e.windowHeight),(n<c.top||i>c.bottom)&&e.setOutOfView(c,a)}})),this.hasScrollTicking=!1}},{key:"setInView",value:function(t,e){this.els[e].inView=!0,t.el.classList.add(t.class),this.currentElements[e]=t,t.call&&this.hasCallEventSet&&(this.dispatchCall(t,"enter"),t.repeat||(this.els[e].call=!1))}},{key:"setOutOfView",value:function(t,e){var i=this;this.els[e].inView=!1,Object.keys(this.currentElements).forEach((function(t){t===e&&delete i.currentElements[t]})),t.call&&this.hasCallEventSet&&this.dispatchCall(t,"exit"),t.repeat&&t.el.classList.remove(t.class)}},{key:"dispatchCall",value:function(t,e){this.callWay=e,this.callValue=t.call.split(",").map((function(t){return t.trim()})),this.callObj=t,1==this.callValue.length&&(this.callValue=this.callValue[0]);var i=new Event(this.namespace+"call");this.el.dispatchEvent(i)}},{key:"dispatchScroll",value:function(){var t=new Event(this.namespace+"scroll");this.el.dispatchEvent(t)}},{key:"setEvents",value:function(t,e){this.listeners[t]||(this.listeners[t]=[]);var i=this.listeners[t];i.push(e),1===i.length&&this.el.addEventListener(this.namespace+t,this.checkEvent,!1),"call"===t&&(this.hasCallEventSet=!0,this.detectElements(!0))}},{key:"unsetEvents",value:function(t,e){if(this.listeners[t]){var i=this.listeners[t],n=i.indexOf(e);n<0||(i.splice(n,1),0===i.index&&this.el.removeEventListener(this.namespace+t,this.checkEvent,!1))}}},{key:"checkEvent",value:function(t){var e=this,i=t.type.replace(this.namespace,""),n=this.listeners[i];n&&0!==n.length&&n.forEach((function(t){switch(i){case"scroll":return t(e.instance);case"call":return t(e.callValue,e.callWay,e.callObj);default:return t()}}))}},{key:"startScroll",value:function(){}},{key:"stopScroll",value:function(){}},{key:"setScroll",value:function(t,e){this.instance.scroll={x:0,y:0}}},{key:"destroy",value:function(){var t=this;window.removeEventListener("resize",this.checkResize,!1),Object.keys(this.listeners).forEach((function(e){t.el.removeEventListener(t.namespace+e,t.checkEvent,!1)})),this.listeners={},this.scrollToEls.forEach((function(e){e.removeEventListener("click",t.setScrollTo,!1)})),this.html.classList.remove(this.initClass)}}]),e}();"undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self&&self;function g(t,e){return t(e={exports:{}},e.exports),e.exports}var b=g((function(t,e){t.exports={polyfill:function(){var t=window,e=document;if(!("scrollBehavior"in e.documentElement.style)||!0===t.__forceSmoothScrollPolyfill__){var i,n=t.HTMLElement||t.Element,s={scroll:t.scroll||t.scrollTo,scrollBy:t.scrollBy,elementScroll:n.prototype.scroll||l,scrollIntoView:n.prototype.scrollIntoView},o=t.performance&&t.performance.now?t.performance.now.bind(t.performance):Date.now,r=(i=t.navigator.userAgent,new RegExp(["MSIE ","Trident/","Edge/"].join("|")).test(i)?1:0);t.scroll=t.scrollTo=function(){void 0!==arguments[0]&&(!0!==a(arguments[0])?p.call(t,e.body,void 0!==arguments[0].left?~~arguments[0].left:t.scrollX||t.pageXOffset,void 0!==arguments[0].top?~~arguments[0].top:t.scrollY||t.pageYOffset):s.scroll.call(t,void 0!==arguments[0].left?arguments[0].left:"object"!=typeof arguments[0]?arguments[0]:t.scrollX||t.pageXOffset,void 0!==arguments[0].top?arguments[0].top:void 0!==arguments[1]?arguments[1]:t.scrollY||t.pageYOffset))},t.scrollBy=function(){void 0!==arguments[0]&&(a(arguments[0])?s.scrollBy.call(t,void 0!==arguments[0].left?arguments[0].left:"object"!=typeof arguments[0]?arguments[0]:0,void 0!==arguments[0].top?arguments[0].top:void 0!==arguments[1]?arguments[1]:0):p.call(t,e.body,~~arguments[0].left+(t.scrollX||t.pageXOffset),~~arguments[0].top+(t.scrollY||t.pageYOffset)))},n.prototype.scroll=n.prototype.scrollTo=function(){if(void 0!==arguments[0])if(!0!==a(arguments[0])){var t=arguments[0].left,e=arguments[0].top;p.call(this,this,void 0===t?this.scrollLeft:~~t,void 0===e?this.scrollTop:~~e)}else{if("number"==typeof arguments[0]&&void 0===arguments[1])throw new SyntaxError("Value could not be converted");s.elementScroll.call(this,void 0!==arguments[0].left?~~arguments[0].left:"object"!=typeof arguments[0]?~~arguments[0]:this.scrollLeft,void 0!==arguments[0].top?~~arguments[0].top:void 0!==arguments[1]?~~arguments[1]:this.scrollTop)}},n.prototype.scrollBy=function(){void 0!==arguments[0]&&(!0!==a(arguments[0])?this.scroll({left:~~arguments[0].left+this.scrollLeft,top:~~arguments[0].top+this.scrollTop,behavior:arguments[0].behavior}):s.elementScroll.call(this,void 0!==arguments[0].left?~~arguments[0].left+this.scrollLeft:~~arguments[0]+this.scrollLeft,void 0!==arguments[0].top?~~arguments[0].top+this.scrollTop:~~arguments[1]+this.scrollTop))},n.prototype.scrollIntoView=function(){if(!0!==a(arguments[0])){var i=u(this),n=i.getBoundingClientRect(),o=this.getBoundingClientRect();i!==e.body?(p.call(this,i,i.scrollLeft+o.left-n.left,i.scrollTop+o.top-n.top),"fixed"!==t.getComputedStyle(i).position&&t.scrollBy({left:n.left,top:n.top,behavior:"smooth"})):t.scrollBy({left:o.left,top:o.top,behavior:"smooth"})}else s.scrollIntoView.call(this,void 0===arguments[0]||arguments[0])}}function l(t,e){this.scrollLeft=t,this.scrollTop=e}function a(t){if(null===t||"object"!=typeof t||void 0===t.behavior||"auto"===t.behavior||"instant"===t.behavior)return!0;if("object"==typeof t&&"smooth"===t.behavior)return!1;throw new TypeError("behavior member of ScrollOptions "+t.behavior+" is not a valid value for enumeration ScrollBehavior.")}function c(t,e){return"Y"===e?t.clientHeight+r<t.scrollHeight:"X"===e?t.clientWidth+r<t.scrollWidth:void 0}function h(e,i){var n=t.getComputedStyle(e,null)["overflow"+i];return"auto"===n||"scroll"===n}function d(t){var e=c(t,"Y")&&h(t,"Y"),i=c(t,"X")&&h(t,"X");return e||i}function u(t){for(;t!==e.body&&!1===d(t);)t=t.parentNode||t.host;return t}function f(e){var i,n,s,r,l=(o()-e.startTime)/468;r=l=l>1?1:l,i=.5*(1-Math.cos(Math.PI*r)),n=e.startX+(e.x-e.startX)*i,s=e.startY+(e.y-e.startY)*i,e.method.call(e.scrollable,n,s),n===e.x&&s===e.y||t.requestAnimationFrame(f.bind(t,e))}function p(i,n,r){var a,c,h,d,u=o();i===e.body?(a=t,c=t.scrollX||t.pageXOffset,h=t.scrollY||t.pageYOffset,d=s.scroll):(a=i,c=i.scrollLeft,h=i.scrollTop,d=l),f({scrollable:a,method:d,startTime:u,startX:c,startY:h,x:n,y:r})}}}}));b.polyfill;function x(t){for(var e=[];t&&t!==document;t=t.parentNode)e.push(t);return e}function k(t){var e={};if(window.getComputedStyle){var i=getComputedStyle(t),n=i.transform||i.webkitTransform||i.mozTransform,s=n.match(/^matrix3d\((.+)\)$/);return s?(e.x=s?parseFloat(s[1].split(", ")[12]):0,e.y=s?parseFloat(s[1].split(", ")[13]):0):(s=n.match(/^matrix\((.+)\)$/),e.x=s?parseFloat(s[1].split(", ")[4]):0,e.y=s?parseFloat(s[1].split(", ")[5]):0),e}}function S(t,e,i){return(1-i)*t+i*e}var E=function(e){r(s,e);var n=d(s);function s(){var e,i=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return t(this,s),(e=n.call(this,i)).resetNativeScroll&&(history.scrollRestoration&&(history.scrollRestoration="manual"),window.scrollTo(0,0)),window.addEventListener("scroll",e.checkScroll,!1),void 0===window.smoothscrollPolyfill&&(window.smoothscrollPolyfill=b,window.smoothscrollPolyfill.polyfill()),e}return i(s,[{key:"init",value:function(){this.instance.scroll.y=window.pageYOffset,this.parallaxElements={},this.sections={},this.addSections(),this.addElements(),this.detectElements(),u(l(s.prototype),"init",this).call(this)}},{key:"checkScroll",value:function(){var t=this;u(l(s.prototype),"checkScroll",this).call(this),this.getDirection&&this.addDirection(),this.getSpeed&&(this.addSpeed(),this.speedTs=Date.now()),this.instance.scroll.y=window.pageYOffset,Object.entries(this.els).length&&(this.hasScrollTicking||(requestAnimationFrame((function(){t.detectElements(),t.transformElements()})),this.hasScrollTicking=!0))}},{key:"raf",value:function(){}},{key:"addDirection",value:function(){window.pageYOffset>this.instance.scroll.y?"down"!==this.instance.direction&&(this.instance.direction="down"):window.pageYOffset<this.instance.scroll.y&&"up"!==this.instance.direction&&(this.instance.direction="up")}},{key:"addSpeed",value:function(){window.pageYOffset!=this.instance.scroll.y?this.instance.speed=(window.pageYOffset-this.instance.scroll.y)/Math.max(1,Date.now()-this.speedTs):this.instance.speed=0}},{key:"resize",value:function(){this.windowHeight=window.innerHeight,this.windowWidth=window.innerWidth,this.instance.limit.x=this.html.offsetWidth-this.windowWidth,this.instance.limit.y=this.html.offsetHeight-this.windowHeight,Object.entries(this.els).length&&this.updateElements()}},{key:"addSections",value:function(){var t=this;this.sections={};var e=this.el.querySelectorAll("[data-".concat(this.name,"-section]"));0===e.length&&(e=[this.el]),e.forEach((function(e,i){var n="string"==typeof e.dataset[t.name+"Id"]?e.dataset[t.name+"Id"]:"section"+i,s=e.getBoundingClientRect(),o={x:s.left-1.5*window.innerWidth-k(e).x,y:s.top-1.5*window.innerHeight-k(e).y},r={x:o.x+s.width+2*window.innerWidth,y:o.y+s.height+2*window.innerHeight},l="string"==typeof e.dataset[t.name+"Persistent"];e.setAttribute("data-scroll-section-id",n);var a={el:e,offset:o,limit:r,inView:!1,persistent:l,id:n};t.sections[n]=a}))}},{key:"addElements",value:function(){var t=this;this.els={},this.parallaxElements={},this.el.querySelectorAll("[data-".concat(this.name,"]")).forEach((function(e,i){var n,s,o,r=x(e),l=Object.entries(t.sections).map((function(t){var e=f(t,2);e[0];return e[1]})).find((function(t){return r.includes(t.el)})),a=e.dataset[t.name+"Class"]||t.class,c="string"==typeof e.dataset[t.name+"Id"]?e.dataset[t.name+"Id"]:"el"+i,h=e.dataset[t.name+"Repeat"],d=e.dataset[t.name+"Call"],u=e.dataset[t.name+"Position"],p=e.dataset[t.name+"Delay"],m=e.dataset[t.name+"Direction"],v="string"==typeof e.dataset[t.name+"Sticky"],y=!!e.dataset[t.name+"Speed"]&&parseFloat(e.dataset[t.name+"Speed"])/10,w="string"==typeof e.dataset[t.name+"Offset"]?e.dataset[t.name+"Offset"].split(","):t.offset,g=e.dataset[t.name+"Target"],b=(o=void 0!==g?document.querySelector("".concat(g)):e).getBoundingClientRect();null===l||l.inView?(n=b.top+t.instance.scroll.y-k(o).y,s=b.left+t.instance.scroll.x-k(o).x):(n=b.top-k(l.el).y-k(o).y,s=b.left-k(l.el).x-k(o).x);var S=n+o.offsetHeight,E=s+o.offsetWidth,T={x:(E-s)/2+s,y:(S-n)/2+n};if(v){var A=e.getBoundingClientRect(),O=A.top,C=A.left,W={x:C-s,y:O-n};n+=window.innerHeight,s+=window.innerWidth,S=O+o.offsetHeight-e.offsetHeight-W[t.directionAxis],T={x:((E=C+o.offsetWidth-e.offsetWidth-W[t.directionAxis])-s)/2+s,y:(S-n)/2+n}}h="false"!=h&&(null!=h||t.repeat);var L=[0,0];if(w)if("horizontal"===t.direction){for(var H=0;H<w.length;H++)"string"==typeof w[H]?w[H].includes("%")?L[H]=parseInt(w[H].replace("%","")*t.windowWidth/100):L[H]=parseInt(w[H]):L[H]=w[H];s+=L[0],E-=L[1]}else{for(H=0;H<w.length;H++)"string"==typeof w[H]?w[H].includes("%")?L[H]=parseInt(w[H].replace("%","")*t.windowHeight/100):L[H]=parseInt(w[H]):L[H]=w[H];n+=L[0],S-=L[1]}var M={el:e,id:c,class:a,section:l,top:n,middle:T,bottom:S,left:s,right:E,offset:w,progress:0,repeat:h,inView:!1,call:d,speed:y,delay:p,position:u,targetEl:o,direction:m,sticky:v};t.els[c]=M,e.classList.contains(a)&&t.setInView(t.els[c],c),(!1!==y||v)&&(t.parallaxElements[c]=M)}))}},{key:"updateElements",value:function(){var t=this;Object.entries(this.els).forEach((function(e){var i=f(e,2),n=i[0],s=i[1],o=s.targetEl.getBoundingClientRect().top+t.instance.scroll.y,r=o+s.targetEl.offsetHeight,l=t.getRelativeOffset(s.offset);t.els[n].top=o+l[0],t.els[n].bottom=r-l[1]})),this.hasScrollTicking=!1}},{key:"getRelativeOffset",value:function(t){var e=[0,0];if(t)for(var i=0;i<t.length;i++)"string"==typeof t[i]?t[i].includes("%")?e[i]=parseInt(t[i].replace("%","")*this.windowHeight/100):e[i]=parseInt(t[i]):e[i]=t[i];return e}},{key:"transform",value:function(t,e,i,n){var s;if(n){var o=k(t),r=S(o.x,e,n),l=S(o.y,i,n);s="matrix3d(1,0,0.00,0,0.00,1,0.00,0,0,0,1,0,".concat(r,",").concat(l,",0,1)")}else s="matrix3d(1,0,0.00,0,0.00,1,0.00,0,0,0,1,0,".concat(e,",").concat(i,",0,1)");t.style.webkitTransform=s,t.style.msTransform=s,t.style.transform=s}},{key:"transformElements",value:function(t){var e=this,i=arguments.length>1&&void 0!==arguments[1]&&arguments[1],n=this.instance.scroll.x+this.windowWidth,s=this.instance.scroll.y+this.windowHeight,o={x:this.instance.scroll.x+this.windowMiddle.x,y:this.instance.scroll.y+this.windowMiddle.y};Object.entries(this.parallaxElements).forEach((function(r){var l=f(r,2),a=(l[0],l[1]),c=!1;if(t&&(c=0),a.inView||i)switch(a.position){case"top":c=e.instance.scroll[e.directionAxis]*-a.speed;break;case"elementTop":c=(s-a.top)*-a.speed;break;case"bottom":c=(e.instance.limit[e.directionAxis]-s+e.windowHeight)*a.speed;break;case"left":c=e.instance.scroll[e.directionAxis]*-a.speed;break;case"elementLeft":c=(n-a.left)*-a.speed;break;case"right":c=(e.instance.limit[e.directionAxis]-n+e.windowHeight)*a.speed;break;default:c=(o[e.directionAxis]-a.middle[e.directionAxis])*-a.speed}a.sticky&&(c=a.inView?"horizontal"===e.direction?e.instance.scroll.x-a.left+window.innerWidth:e.instance.scroll.y-a.top+window.innerHeight:"horizontal"===e.direction?e.instance.scroll.x<a.left-window.innerWidth&&e.instance.scroll.x<a.left-window.innerWidth/2?0:e.instance.scroll.x>a.right&&e.instance.scroll.x>a.right+100&&a.right-a.left+window.innerWidth:e.instance.scroll.y<a.top-window.innerHeight&&e.instance.scroll.y<a.top-window.innerHeight/2?0:e.instance.scroll.y>a.bottom&&e.instance.scroll.y>a.bottom+100&&a.bottom-a.top+window.innerHeight),!1!==c&&("horizontal"===a.direction||"horizontal"===e.direction&&"vertical"!==a.direction?e.transform(a.el,c,0,!t&&a.delay):e.transform(a.el,0,c,!t&&a.delay))}))}},{key:"scrollTo",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},i=parseInt(e.offset)||0,n=!!e.callback&&e.callback;if("string"==typeof t){if("top"===t)t=this.html;else if("bottom"===t)t=this.html.offsetHeight-window.innerHeight;else if(!(t=document.querySelector(t)))return}else if("number"==typeof t)t=parseInt(t);else if(!t||!t.tagName)return void console.warn("`target` parameter is not valid");i="number"!=typeof t?t.getBoundingClientRect().top+i+this.instance.scroll.y:t+i;var s=function(){return parseInt(window.pageYOffset)===parseInt(i)};if(n){if(s())return void n();var o=function t(){s()&&(window.removeEventListener("scroll",t),n())};window.addEventListener("scroll",o)}window.scrollTo({top:i,behavior:"smooth"})}},{key:"update",value:function(){this.addElements(),this.detectElements()}},{key:"destroy",value:function(){u(l(s.prototype),"destroy",this).call(this),window.removeEventListener("scroll",this.checkScroll,!1)}}]),s}(w),T=g((function(t,e){t.exports=function(){var t=0;function e(e){return"__private_"+t+++"_"+e}function i(t,e){if(!Object.prototype.hasOwnProperty.call(t,e))throw new TypeError("attempted to use private field on non-instance");return t}function n(){}n.prototype={on:function(t,e,i){var n=this.e||(this.e={});return(n[t]||(n[t]=[])).push({fn:e,ctx:i}),this},once:function(t,e,i){var n=this;function s(){n.off(t,s),e.apply(i,arguments)}return s._=e,this.on(t,s,i)},emit:function(t){for(var e=[].slice.call(arguments,1),i=((this.e||(this.e={}))[t]||[]).slice(),n=0,s=i.length;n<s;n++)i[n].fn.apply(i[n].ctx,e);return this},off:function(t,e){var i=this.e||(this.e={}),n=i[t],s=[];if(n&&e)for(var o=0,r=n.length;o<r;o++)n[o].fn!==e&&n[o].fn._!==e&&s.push(n[o]);return s.length?i[t]=s:delete i[t],this}};var s=n;s.TinyEmitter=n;var o,r="virtualscroll",l=e("options"),a=e("el"),c=e("emitter"),h=e("event"),d=e("touchStart"),u=e("bodyTouchAction");return function(){function t(t){var e=this;Object.defineProperty(this,l,{writable:!0,value:void 0}),Object.defineProperty(this,a,{writable:!0,value:void 0}),Object.defineProperty(this,c,{writable:!0,value:void 0}),Object.defineProperty(this,h,{writable:!0,value:void 0}),Object.defineProperty(this,d,{writable:!0,value:void 0}),Object.defineProperty(this,u,{writable:!0,value:void 0}),this._onWheel=function(t){var n=i(e,l)[l],s=i(e,h)[h];s.deltaX=t.wheelDeltaX||-1*t.deltaX,s.deltaY=t.wheelDeltaY||-1*t.deltaY,o.isFirefox&&1===t.deltaMode&&(s.deltaX*=n.firefoxMultiplier,s.deltaY*=n.firefoxMultiplier),s.deltaX*=n.mouseMultiplier,s.deltaY*=n.mouseMultiplier,e._notify(t)},this._onMouseWheel=function(t){var n=i(e,h)[h];n.deltaX=t.wheelDeltaX?t.wheelDeltaX:0,n.deltaY=t.wheelDeltaY?t.wheelDeltaY:t.wheelDelta,e._notify(t)},this._onTouchStart=function(t){var n=t.targetTouches?t.targetTouches[0]:t;i(e,d)[d].x=n.pageX,i(e,d)[d].y=n.pageY},this._onTouchMove=function(t){var n=i(e,l)[l];n.preventTouch&&!t.target.classList.contains(n.unpreventTouchClass)&&t.preventDefault();var s=i(e,h)[h],o=t.targetTouches?t.targetTouches[0]:t;s.deltaX=(o.pageX-i(e,d)[d].x)*n.touchMultiplier,s.deltaY=(o.pageY-i(e,d)[d].y)*n.touchMultiplier,i(e,d)[d].x=o.pageX,i(e,d)[d].y=o.pageY,e._notify(t)},this._onKeyDown=function(t){var n=i(e,h)[h];n.deltaX=n.deltaY=0;var s=window.innerHeight-40;switch(t.keyCode){case 37:case 38:n.deltaY=i(e,l)[l].keyStep;break;case 39:case 40:n.deltaY=-i(e,l)[l].keyStep;break;case 32:n.deltaY=s*(t.shiftKey?1:-1);break;default:return}e._notify(t)},i(this,a)[a]=window,t&&t.el&&(i(this,a)[a]=t.el,delete t.el),o||(o={hasWheelEvent:"onwheel"in document,hasMouseWheelEvent:"onmousewheel"in document,hasTouch:"ontouchstart"in document,hasTouchWin:navigator.msMaxTouchPoints&&navigator.msMaxTouchPoints>1,hasPointer:!!window.navigator.msPointerEnabled,hasKeyDown:"onkeydown"in document,isFirefox:navigator.userAgent.indexOf("Firefox")>-1}),i(this,l)[l]=Object.assign({mouseMultiplier:1,touchMultiplier:2,firefoxMultiplier:15,keyStep:120,preventTouch:!1,unpreventTouchClass:"vs-touchmove-allowed",useKeyboard:!0,useTouch:!0},t),i(this,c)[c]=new s,i(this,h)[h]={y:0,x:0,deltaX:0,deltaY:0},i(this,d)[d]={x:null,y:null},i(this,u)[u]=null,void 0!==i(this,l)[l].passive&&(this.listenerOptions={passive:i(this,l)[l].passive})}var e=t.prototype;return e._notify=function(t){var e=i(this,h)[h];e.x+=e.deltaX,e.y+=e.deltaY,i(this,c)[c].emit(r,{x:e.x,y:e.y,deltaX:e.deltaX,deltaY:e.deltaY,originalEvent:t})},e._bind=function(){o.hasWheelEvent&&i(this,a)[a].addEventListener("wheel",this._onWheel,this.listenerOptions),o.hasMouseWheelEvent&&i(this,a)[a].addEventListener("mousewheel",this._onMouseWheel,this.listenerOptions),o.hasTouch&&i(this,l)[l].useTouch&&(i(this,a)[a].addEventListener("touchstart",this._onTouchStart,this.listenerOptions),i(this,a)[a].addEventListener("touchmove",this._onTouchMove,this.listenerOptions)),o.hasPointer&&o.hasTouchWin&&(i(this,u)[u]=document.body.style.msTouchAction,document.body.style.msTouchAction="none",i(this,a)[a].addEventListener("MSPointerDown",this._onTouchStart,!0),i(this,a)[a].addEventListener("MSPointerMove",this._onTouchMove,!0)),o.hasKeyDown&&i(this,l)[l].useKeyboard&&document.addEventListener("keydown",this._onKeyDown)},e._unbind=function(){o.hasWheelEvent&&i(this,a)[a].removeEventListener("wheel",this._onWheel),o.hasMouseWheelEvent&&i(this,a)[a].removeEventListener("mousewheel",this._onMouseWheel),o.hasTouch&&(i(this,a)[a].removeEventListener("touchstart",this._onTouchStart),i(this,a)[a].removeEventListener("touchmove",this._onTouchMove)),o.hasPointer&&o.hasTouchWin&&(document.body.style.msTouchAction=i(this,u)[u],i(this,a)[a].removeEventListener("MSPointerDown",this._onTouchStart,!0),i(this,a)[a].removeEventListener("MSPointerMove",this._onTouchMove,!0)),o.hasKeyDown&&i(this,l)[l].useKeyboard&&document.removeEventListener("keydown",this._onKeyDown)},e.on=function(t,e){i(this,c)[c].on(r,t,e);var n=i(this,c)[c].e;n&&n[r]&&1===n[r].length&&this._bind()},e.off=function(t,e){i(this,c)[c].off(r,t,e);var n=i(this,c)[c].e;(!n[r]||n[r].length<=0)&&this._unbind()},e.destroy=function(){i(this,c)[c].off(),this._unbind()},t}()}()})),A="function"==typeof Float32Array;function O(t,e){return 1-3*e+3*t}function C(t,e){return 3*e-6*t}function W(t){return 3*t}function L(t,e,i){return((O(e,i)*t+C(e,i))*t+W(e))*t}function H(t,e,i){return 3*O(e,i)*t*t+2*C(e,i)*t+W(e)}function M(t){return t}var B=function(t,e,i,n){if(!(0<=t&&t<=1&&0<=i&&i<=1))throw new Error("bezier x values must be in [0, 1] range");if(t===e&&i===n)return M;for(var s=A?new Float32Array(11):new Array(11),o=0;o<11;++o)s[o]=L(.1*o,t,i);function r(e){for(var n=0,o=1;10!==o&&s[o]<=e;++o)n+=.1;--o;var r=n+.1*((e-s[o])/(s[o+1]-s[o])),l=H(r,t,i);return l>=.001?function(t,e,i,n){for(var s=0;s<4;++s){var o=H(e,i,n);if(0===o)return e;e-=(L(e,i,n)-t)/o}return e}(e,r,t,i):0===l?r:function(t,e,i,n,s){var o,r,l=0;do{(o=L(r=e+(i-e)/2,n,s)-t)>0?i=r:e=r}while(Math.abs(o)>1e-7&&++l<10);return r}(e,n,n+.1,t,i)}return function(t){return 0===t?0:1===t?1:L(r(t),e,n)}},j=38,D=40,R=32,P=9,I=33,_=34,z=36,Y=35,V=function(e){r(s,e);var n=d(s);function s(){var e,i=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return t(this,s),history.scrollRestoration&&(history.scrollRestoration="manual"),window.scrollTo(0,0),(e=n.call(this,i)).inertia&&(e.lerp=.1*e.inertia),e.isScrolling=!1,e.isDraggingScrollbar=!1,e.isTicking=!1,e.hasScrollTicking=!1,e.parallaxElements={},e.stop=!1,e.scrollbarContainer=i.scrollbarContainer,e.checkKey=e.checkKey.bind(c(e)),window.addEventListener("keydown",e.checkKey,!1),e}return i(s,[{key:"init",value:function(){var t=this;this.html.classList.add(this.smoothClass),this.html.setAttribute("data-".concat(this.name,"-direction"),this.direction),this.instance=o({delta:{x:this.initPosition.x,y:this.initPosition.y},scroll:{x:this.initPosition.x,y:this.initPosition.y}},this.instance),this.vs=new T({el:this.scrollFromAnywhere?document:this.el,mouseMultiplier:navigator.platform.indexOf("Win")>-1?1:.4,firefoxMultiplier:this.firefoxMultiplier,touchMultiplier:this.touchMultiplier,useKeyboard:!1,passive:!0}),this.vs.on((function(e){t.stop||t.isDraggingScrollbar||requestAnimationFrame((function(){t.updateDelta(e),t.isScrolling||t.startScrolling()}))})),this.setScrollLimit(),this.initScrollBar(),this.addSections(),this.addElements(),this.checkScroll(!0),this.transformElements(!0,!0),u(l(s.prototype),"init",this).call(this)}},{key:"setScrollLimit",value:function(){if(this.instance.limit.y=this.el.offsetHeight-this.windowHeight,"horizontal"===this.direction){for(var t=0,e=this.el.children,i=0;i<e.length;i++)t+=e[i].offsetWidth;this.instance.limit.x=t-this.windowWidth}}},{key:"startScrolling",value:function(){this.startScrollTs=Date.now(),this.isScrolling=!0,this.html.classList.add(this.scrollingClass)}},{key:"stopScrolling",value:function(){this.scrollToRaf&&(cancelAnimationFrame(this.scrollToRaf),this.scrollToRaf=null),this.isScrolling=!1,this.instance.scroll.y=Math.round(this.instance.scroll.y),this.html.classList.remove(this.scrollingClass)}},{key:"checkKey",value:function(t){var e=this;if(this.stop)t.keyCode==P&&requestAnimationFrame((function(){e.html.scrollTop=0,document.body.scrollTop=0,e.html.scrollLeft=0,document.body.scrollLeft=0}));else{switch(t.keyCode){case P:requestAnimationFrame((function(){e.html.scrollTop=0,document.body.scrollTop=0,e.html.scrollLeft=0,document.body.scrollLeft=0,e.scrollTo(document.activeElement,{offset:-window.innerHeight/2})}));break;case j:this.instance.delta[this.directionAxis]-=240;break;case D:this.instance.delta[this.directionAxis]+=240;break;case I:this.instance.delta[this.directionAxis]-=window.innerHeight;break;case _:this.instance.delta[this.directionAxis]+=window.innerHeight;break;case z:this.instance.delta[this.directionAxis]-=this.instance.limit[this.directionAxis];break;case Y:this.instance.delta[this.directionAxis]+=this.instance.limit[this.directionAxis];break;case R:document.activeElement instanceof HTMLInputElement||document.activeElement instanceof HTMLTextAreaElement||(t.shiftKey?this.instance.delta[this.directionAxis]-=window.innerHeight:this.instance.delta[this.directionAxis]+=window.innerHeight);break;default:return}this.instance.delta[this.directionAxis]<0&&(this.instance.delta[this.directionAxis]=0),this.instance.delta[this.directionAxis]>this.instance.limit[this.directionAxis]&&(this.instance.delta[this.directionAxis]=this.instance.limit[this.directionAxis]),this.stopScrolling(),this.isScrolling=!0,this.html.classList.add(this.scrollingClass)}}},{key:"raf",value:function(){this.checkScroll()}},{key:"checkScroll",value:function(){var t=this,e=arguments.length>0&&void 0!==arguments[0]&&arguments[0];if(e||this.isScrolling||this.isDraggingScrollbar){this.updateScroll();var i=Math.abs(this.instance.delta[this.directionAxis]-this.instance.scroll[this.directionAxis]),n=Date.now()-this.startScrollTs;if(!this.animatingScroll&&n>100&&(i<.5&&0!=this.instance.delta[this.directionAxis]||i<.5&&0==this.instance.delta[this.directionAxis])&&this.stopScrolling(),Object.entries(this.sections).forEach((function(i){var n=f(i,2),s=(n[0],n[1]);s.persistent||t.instance.scroll[t.directionAxis]>s.offset[t.directionAxis]&&t.instance.scroll[t.directionAxis]<s.limit[t.directionAxis]?("horizontal"===t.direction?t.transform(s.el,-t.instance.scroll[t.directionAxis],0):t.transform(s.el,0,-t.instance.scroll[t.directionAxis]),s.inView||(s.inView=!0,s.el.style.opacity=1,s.el.style.pointerEvents="all",s.el.setAttribute("data-".concat(t.name,"-section-inview"),""))):((s.inView||e)&&(s.inView=!1,s.el.style.opacity=0,s.el.style.pointerEvents="none",s.el.removeAttribute("data-".concat(t.name,"-section-inview"))),t.transform(s.el,0,0))})),this.getDirection&&this.addDirection(),this.getSpeed&&(this.addSpeed(),this.speedTs=Date.now()),this.detectElements(),this.transformElements(),this.hasScrollbar){var o=this.instance.scroll[this.directionAxis]/this.instance.limit[this.directionAxis]*this.scrollBarLimit[this.directionAxis];"horizontal"===this.direction?this.transform(this.scrollbarThumb,o,0):this.transform(this.scrollbarThumb,0,o)}u(l(s.prototype),"checkScroll",this).call(this)}}},{key:"resize",value:function(){this.windowHeight=window.innerHeight,this.windowWidth=window.innerWidth,this.checkContext(),this.windowMiddle={x:this.windowWidth/2,y:this.windowHeight/2},this.update()}},{key:"updateDelta",value:function(t){var e,i=this[this.context]&&this[this.context].gestureDirection?this[this.context].gestureDirection:this.gestureDirection;e="both"===i?t.deltaX+t.deltaY:"vertical"===i?t.deltaY:"horizontal"===i?t.deltaX:t.deltaY,this.instance.delta[this.directionAxis]-=e*this.multiplier,this.instance.delta[this.directionAxis]<0&&(this.instance.delta[this.directionAxis]=0),this.instance.delta[this.directionAxis]>this.instance.limit[this.directionAxis]&&(this.instance.delta[this.directionAxis]=this.instance.limit[this.directionAxis])}},{key:"updateScroll",value:function(t){this.isScrolling||this.isDraggingScrollbar?this.instance.scroll[this.directionAxis]=S(this.instance.scroll[this.directionAxis],this.instance.delta[this.directionAxis],this.lerp):this.instance.scroll[this.directionAxis]>this.instance.limit[this.directionAxis]?this.setScroll(this.instance.scroll[this.directionAxis],this.instance.limit[this.directionAxis]):this.instance.scroll.y<0?this.setScroll(this.instance.scroll[this.directionAxis],0):this.setScroll(this.instance.scroll[this.directionAxis],this.instance.delta[this.directionAxis])}},{key:"addDirection",value:function(){this.instance.delta.y>this.instance.scroll.y?"down"!==this.instance.direction&&(this.instance.direction="down"):this.instance.delta.y<this.instance.scroll.y&&"up"!==this.instance.direction&&(this.instance.direction="up"),this.instance.delta.x>this.instance.scroll.x?"right"!==this.instance.direction&&(this.instance.direction="right"):this.instance.delta.x<this.instance.scroll.x&&"left"!==this.instance.direction&&(this.instance.direction="left")}},{key:"addSpeed",value:function(){this.instance.delta[this.directionAxis]!=this.instance.scroll[this.directionAxis]?this.instance.speed=(this.instance.delta[this.directionAxis]-this.instance.scroll[this.directionAxis])/Math.max(1,Date.now()-this.speedTs):this.instance.speed=0}},{key:"initScrollBar",value:function(){if(this.scrollbar=document.createElement("span"),this.scrollbarThumb=document.createElement("span"),this.scrollbar.classList.add("".concat(this.scrollbarClass)),this.scrollbarThumb.classList.add("".concat(this.scrollbarClass,"_thumb")),this.scrollbar.append(this.scrollbarThumb),this.scrollbarContainer?this.scrollbarContainer.append(this.scrollbar):document.body.append(this.scrollbar),this.getScrollBar=this.getScrollBar.bind(this),this.releaseScrollBar=this.releaseScrollBar.bind(this),this.moveScrollBar=this.moveScrollBar.bind(this),this.scrollbarThumb.addEventListener("mousedown",this.getScrollBar),window.addEventListener("mouseup",this.releaseScrollBar),window.addEventListener("mousemove",this.moveScrollBar),this.hasScrollbar=!1,"horizontal"==this.direction){if(this.instance.limit.x+this.windowWidth<=this.windowWidth)return}else if(this.instance.limit.y+this.windowHeight<=this.windowHeight)return;this.hasScrollbar=!0,this.scrollbarBCR=this.scrollbar.getBoundingClientRect(),this.scrollbarHeight=this.scrollbarBCR.height,this.scrollbarWidth=this.scrollbarBCR.width,"horizontal"===this.direction?this.scrollbarThumb.style.width="".concat(this.scrollbarWidth*this.scrollbarWidth/(this.instance.limit.x+this.scrollbarWidth),"px"):this.scrollbarThumb.style.height="".concat(this.scrollbarHeight*this.scrollbarHeight/(this.instance.limit.y+this.scrollbarHeight),"px"),this.scrollbarThumbBCR=this.scrollbarThumb.getBoundingClientRect(),this.scrollBarLimit={x:this.scrollbarWidth-this.scrollbarThumbBCR.width,y:this.scrollbarHeight-this.scrollbarThumbBCR.height}}},{key:"reinitScrollBar",value:function(){if(this.hasScrollbar=!1,"horizontal"==this.direction){if(this.instance.limit.x+this.windowWidth<=this.windowWidth)return}else if(this.instance.limit.y+this.windowHeight<=this.windowHeight)return;this.hasScrollbar=!0,this.scrollbarBCR=this.scrollbar.getBoundingClientRect(),this.scrollbarHeight=this.scrollbarBCR.height,this.scrollbarWidth=this.scrollbarBCR.width,"horizontal"===this.direction?this.scrollbarThumb.style.width="".concat(this.scrollbarWidth*this.scrollbarWidth/(this.instance.limit.x+this.scrollbarWidth),"px"):this.scrollbarThumb.style.height="".concat(this.scrollbarHeight*this.scrollbarHeight/(this.instance.limit.y+this.scrollbarHeight),"px"),this.scrollbarThumbBCR=this.scrollbarThumb.getBoundingClientRect(),this.scrollBarLimit={x:this.scrollbarWidth-this.scrollbarThumbBCR.width,y:this.scrollbarHeight-this.scrollbarThumbBCR.height}}},{key:"destroyScrollBar",value:function(){this.scrollbarThumb.removeEventListener("mousedown",this.getScrollBar),window.removeEventListener("mouseup",this.releaseScrollBar),window.removeEventListener("mousemove",this.moveScrollBar),this.scrollbar.remove()}},{key:"getScrollBar",value:function(t){this.isDraggingScrollbar=!0,this.html.classList.remove(this.scrollingClass),this.html.classList.add(this.draggingClass)}},{key:"releaseScrollBar",value:function(t){this.isDraggingScrollbar=!1,this.html.classList.add(this.scrollingClass),this.html.classList.remove(this.draggingClass)}},{key:"moveScrollBar",value:function(t){var e=this;this.isDraggingScrollbar&&requestAnimationFrame((function(){var i=100*(t.clientX-e.scrollbarBCR.left)/e.scrollbarWidth*e.instance.limit.x/100,n=100*(t.clientY-e.scrollbarBCR.top)/e.scrollbarHeight*e.instance.limit.y/100;n>0&&n<e.instance.limit.y&&(e.instance.delta.y=n),i>0&&i<e.instance.limit.x&&(e.instance.delta.x=i)}))}},{key:"addElements",value:function(){var t=this;this.els={},this.parallaxElements={},this.el.querySelectorAll("[data-".concat(this.name,"]")).forEach((function(e,i){var n,s,o,r=x(e),l=Object.entries(t.sections).map((function(t){var e=f(t,2);e[0];return e[1]})).find((function(t){return r.includes(t.el)})),a=e.dataset[t.name+"Class"]||t.class,c="string"==typeof e.dataset[t.name+"Id"]?e.dataset[t.name+"Id"]:"el"+i,h=e.dataset[t.name+"Repeat"],d=e.dataset[t.name+"Call"],u=e.dataset[t.name+"Position"],p=e.dataset[t.name+"Delay"],m=e.dataset[t.name+"Direction"],v="string"==typeof e.dataset[t.name+"Sticky"],y=!!e.dataset[t.name+"Speed"]&&parseFloat(e.dataset[t.name+"Speed"])/10,w="string"==typeof e.dataset[t.name+"Offset"]?e.dataset[t.name+"Offset"].split(","):t.offset,g=e.dataset[t.name+"Target"],b=(o=void 0!==g?document.querySelector("".concat(g)):e).getBoundingClientRect();null===l||l.inView?(n=b.top+t.instance.scroll.y-k(o).y,s=b.left+t.instance.scroll.x-k(o).x):(n=b.top-k(l.el).y-k(o).y,s=b.left-k(l.el).x-k(o).x);var S=n+o.offsetHeight,E=s+o.offsetWidth,T={x:(E-s)/2+s,y:(S-n)/2+n};if(v){var A=e.getBoundingClientRect(),O=A.top,C=A.left,W={x:C-s,y:O-n};n+=window.innerHeight,s+=window.innerWidth,S=O+o.offsetHeight-e.offsetHeight-W[t.directionAxis],T={x:((E=C+o.offsetWidth-e.offsetWidth-W[t.directionAxis])-s)/2+s,y:(S-n)/2+n}}h="false"!=h&&(null!=h||t.repeat);var L=[0,0];if(w)if("horizontal"===t.direction){for(var H=0;H<w.length;H++)"string"==typeof w[H]?w[H].includes("%")?L[H]=parseInt(w[H].replace("%","")*t.windowWidth/100):L[H]=parseInt(w[H]):L[H]=w[H];s+=L[0],E-=L[1]}else{for(H=0;H<w.length;H++)"string"==typeof w[H]?w[H].includes("%")?L[H]=parseInt(w[H].replace("%","")*t.windowHeight/100):L[H]=parseInt(w[H]):L[H]=w[H];n+=L[0],S-=L[1]}var M={el:e,id:c,class:a,section:l,top:n,middle:T,bottom:S,left:s,right:E,offset:w,progress:0,repeat:h,inView:!1,call:d,speed:y,delay:p,position:u,target:o,direction:m,sticky:v};t.els[c]=M,e.classList.contains(a)&&t.setInView(t.els[c],c),(!1!==y||v)&&(t.parallaxElements[c]=M)}))}},{key:"addSections",value:function(){var t=this;this.sections={};var e=this.el.querySelectorAll("[data-".concat(this.name,"-section]"));0===e.length&&(e=[this.el]),e.forEach((function(e,i){var n="string"==typeof e.dataset[t.name+"Id"]?e.dataset[t.name+"Id"]:"section"+i,s=e.getBoundingClientRect(),o={x:s.left-1.5*window.innerWidth-k(e).x,y:s.top-1.5*window.innerHeight-k(e).y},r={x:o.x+s.width+2*window.innerWidth,y:o.y+s.height+2*window.innerHeight},l="string"==typeof e.dataset[t.name+"Persistent"];e.setAttribute("data-scroll-section-id",n);var a={el:e,offset:o,limit:r,inView:!1,persistent:l,id:n};t.sections[n]=a}))}},{key:"transform",value:function(t,e,i,n){var s;if(n){var o=k(t),r=S(o.x,e,n),l=S(o.y,i,n);s="matrix3d(1,0,0.00,0,0.00,1,0.00,0,0,0,1,0,".concat(r,",").concat(l,",0,1)")}else s="matrix3d(1,0,0.00,0,0.00,1,0.00,0,0,0,1,0,".concat(e,",").concat(i,",0,1)");t.style.webkitTransform=s,t.style.msTransform=s,t.style.transform=s}},{key:"transformElements",value:function(t){var e=this,i=arguments.length>1&&void 0!==arguments[1]&&arguments[1],n=this.instance.scroll.x+this.windowWidth,s=this.instance.scroll.y+this.windowHeight,o={x:this.instance.scroll.x+this.windowMiddle.x,y:this.instance.scroll.y+this.windowMiddle.y};Object.entries(this.parallaxElements).forEach((function(r){var l=f(r,2),a=(l[0],l[1]),c=!1;if(t&&(c=0),a.inView||i)switch(a.position){case"top":c=e.instance.scroll[e.directionAxis]*-a.speed;break;case"elementTop":c=(s-a.top)*-a.speed;break;case"bottom":c=(e.instance.limit[e.directionAxis]-s+e.windowHeight)*a.speed;break;case"left":c=e.instance.scroll[e.directionAxis]*-a.speed;break;case"elementLeft":c=(n-a.left)*-a.speed;break;case"right":c=(e.instance.limit[e.directionAxis]-n+e.windowHeight)*a.speed;break;default:c=(o[e.directionAxis]-a.middle[e.directionAxis])*-a.speed}a.sticky&&(c=a.inView?"horizontal"===e.direction?e.instance.scroll.x-a.left+window.innerWidth:e.instance.scroll.y-a.top+window.innerHeight:"horizontal"===e.direction?e.instance.scroll.x<a.left-window.innerWidth&&e.instance.scroll.x<a.left-window.innerWidth/2?0:e.instance.scroll.x>a.right&&e.instance.scroll.x>a.right+100&&a.right-a.left+window.innerWidth:e.instance.scroll.y<a.top-window.innerHeight&&e.instance.scroll.y<a.top-window.innerHeight/2?0:e.instance.scroll.y>a.bottom&&e.instance.scroll.y>a.bottom+100&&a.bottom-a.top+window.innerHeight),!1!==c&&("horizontal"===a.direction||"horizontal"===e.direction&&"vertical"!==a.direction?e.transform(a.el,c,0,!t&&a.delay):e.transform(a.el,0,c,!t&&a.delay))}))}},{key:"scrollTo",value:function(t){var e=this,i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=parseInt(i.offset)||0,s=isNaN(parseInt(i.duration))?1e3:parseInt(i.duration),o=i.easing||[.25,0,.35,1],r=!!i.disableLerp,l=!!i.callback&&i.callback;if(o=B.apply(void 0,p(o)),"string"==typeof t){if("top"===t)t=0;else if("bottom"===t)t=this.instance.limit.y;else if("left"===t)t=0;else if("right"===t)t=this.instance.limit.x;else if(!(t=document.querySelector(t)))return}else if("number"==typeof t)t=parseInt(t);else if(!t||!t.tagName)return void console.warn("`target` parameter is not valid");if("number"!=typeof t){var a=x(t).includes(this.el);if(!a)return;var c=t.getBoundingClientRect(),h=c.top,d=c.left,u=x(t),m=u.find((function(t){return Object.entries(e.sections).map((function(t){var e=f(t,2);e[0];return e[1]})).find((function(e){return e.el==t}))})),v=0;v=m?k(m)[this.directionAxis]:-this.instance.scroll[this.directionAxis],n="horizontal"===this.direction?d+n-v:h+n-v}else n=t+n;var y=parseFloat(this.instance.delta[this.directionAxis]),w=Math.max(0,Math.min(n,this.instance.limit[this.directionAxis])),g=w-y,b=function(t){r?"horizontal"===e.direction?e.setScroll(y+g*t,e.instance.delta.y):e.setScroll(e.instance.delta.x,y+g*t):e.instance.delta[e.directionAxis]=y+g*t};this.animatingScroll=!0,this.stopScrolling(),this.startScrolling();var S=Date.now(),E=function t(){var i=(Date.now()-S)/s;i>1?(b(1),e.animatingScroll=!1,0==s&&e.update(),l&&l()):(e.scrollToRaf=requestAnimationFrame(t),b(o(i)))};E()}},{key:"update",value:function(){this.setScrollLimit(),this.addSections(),this.addElements(),this.detectElements(),this.updateScroll(),this.transformElements(!0),this.reinitScrollBar(),this.checkScroll(!0)}},{key:"startScroll",value:function(){this.stop=!1}},{key:"stopScroll",value:function(){this.stop=!0}},{key:"setScroll",value:function(t,e){this.instance=o(o({},this.instance),{},{scroll:{x:t,y:e},delta:{x:t,y:e},speed:0})}},{key:"destroy",value:function(){u(l(s.prototype),"destroy",this).call(this),this.stopScrolling(),this.html.classList.remove(this.smoothClass),this.vs.destroy(),this.destroyScrollBar(),window.removeEventListener("keydown",this.checkKey,!1)}}]),s}(w);return function(){function e(){var i=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};t(this,e),this.options=i;var n=y();Object.assign(this,n,i),this.smartphone=n.smartphone,i.smartphone&&Object.assign(this.smartphone,i.smartphone),this.tablet=n.tablet,i.tablet&&Object.assign(this.tablet,i.tablet),this.smooth||"horizontal"!=this.direction||console.warn("🚨 `smooth:false` & `horizontal` direction are not yet compatible"),this.tablet.smooth||"horizontal"!=this.tablet.direction||console.warn("🚨 `smooth:false` & `horizontal` direction are not yet compatible (tablet)"),this.smartphone.smooth||"horizontal"!=this.smartphone.direction||console.warn("🚨 `smooth:false` & `horizontal` direction are not yet compatible (smartphone)"),this.init()}return i(e,[{key:"init",value:function(){var t=this;if(this.options.isMobile=/Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)||"MacIntel"===navigator.platform&&navigator.maxTouchPoints>1||window.innerWidth<this.tablet.breakpoint,this.options.isTablet=this.options.isMobile&&window.innerWidth>=this.tablet.breakpoint,this.smooth&&!this.options.isMobile||this.tablet.smooth&&this.options.isTablet||this.smartphone.smooth&&this.options.isMobile&&!this.options.isTablet?this.scroll=new V(this.options):this.scroll=new E(this.options),this.scroll.init(),window.location.hash){var e=window.location.hash.slice(1,window.location.hash.length),i=document.getElementById(e);i&&this.scroll.scrollTo(i)}this.autoRaf&&requestAnimationFrame((function(){return t.raf()}))}},{key:"raf",value:function(){var t,e=this;null===(t=this.scroll)||void 0===t||t.raf(),this.autoRaf&&requestAnimationFrame((function(){return e.raf()}))}},{key:"update",value:function(){this.scroll.update()}},{key:"start",value:function(){this.scroll.startScroll()}},{key:"stop",value:function(){this.scroll.stopScroll()}},{key:"scrollTo",value:function(t,e){this.scroll.scrollTo(t,e)}},{key:"setScroll",value:function(t,e){this.scroll.setScroll(t,e)}},{key:"on",value:function(t,e){this.scroll.setEvents(t,e)}},{key:"off",value:function(t,e){this.scroll.unsetEvents(t,e)}},{key:"destroy",value:function(){this.scroll.destroy()}}]),e}()})); |
{ | ||
"name": "@studio-freight/locomotive-scroll", | ||
"version": "0.0.6", | ||
"version": "0.0.7", | ||
"description": "Detection of elements in viewport & smooth scrolling with parallax effects.", | ||
@@ -5,0 +5,0 @@ "repository": { |
210
README.md
@@ -5,11 +5,13 @@ [![](https://img.shields.io/npm/v/@studio-freight/locomotive-scroll)](https://www.npmjs.com/package/@studio-freight/locomotive-scroll) | ||
<p align="center"> | ||
<a href="https://github.com/locomotivemtl/locomotive-scroll"> | ||
<a href="https://github.com/studio-freight/locomotive-scroll"> | ||
<img src="https://user-images.githubusercontent.com/4596862/58807621-67aeec00-85e6-11e9-8e3a-3fe4123ee76c.png" height="140"> | ||
</a> | ||
</p> | ||
<h1 align="center">Locomotive Scroll</h1> | ||
<h1 align="center">Studio Freight fork of Locomotive Scroll</h1> | ||
<p align="center">Detection of elements in viewport & smooth scrolling with parallax effects.</p> | ||
## Why | ||
[Locomotive Scroll](https://github.com/locomotivemtl/locomotive-scroll) seems to not be maintained anymore. | ||
<p>This package includes: | ||
@@ -20,2 +22,3 @@ <ul> | ||
<li>parallax on native scroll</li> | ||
<li>fixed bugs</li> | ||
</ul> | ||
@@ -33,5 +36,7 @@ </p> | ||
### Basic | ||
With simple detection. | ||
#### HTML | ||
```html | ||
@@ -43,5 +48,6 @@ <h1 data-scroll>Hey</h1> | ||
#### CSS | ||
Add the base styles to your CSS file. | ||
[`locomotive-scroll.css`](https://github.com/@studio-freight/locomotive-scroll/blob/master/dist/locomotive-scroll.css) | ||
[`locomotive-scroll.css`](https://github.com/studio-freight/locomotive-scroll/blob/master/dist/locomotive-scroll.css) | ||
@@ -51,4 +57,5 @@ #### JS | ||
##### With a bundler | ||
```js | ||
import LocomotiveScroll from 'locomotive-scroll'; | ||
import LocomotiveScroll from '@studio-freight/locomotive-scroll'; | ||
@@ -59,2 +66,3 @@ const scroll = new LocomotiveScroll(); | ||
##### Or without | ||
```js | ||
@@ -68,5 +76,7 @@ <script src="locomotive-scroll.min.js"></script> | ||
``` | ||
_Get the [JS file](https://github.com/locomotivemtl/locomotive-scroll/blob/master/dist/locomotive-scroll.min.js)._ | ||
_Get the [JS file](https://github.com/studio-freight/locomotive-scroll/blob/master/dist/locomotive-scroll.min.js)._ | ||
### Smooth | ||
With smooth scrolling and parallax. | ||
@@ -88,3 +98,3 @@ | ||
```js | ||
import LocomotiveScroll from 'locomotive-scroll'; | ||
import LocomotiveScroll from '@studio-freight/locomotive-scroll'; | ||
@@ -100,5 +110,7 @@ const scroll = new LocomotiveScroll({ | ||
### Advanced | ||
Make it do what you want. | ||
#### With methods | ||
```html | ||
@@ -109,3 +121,3 @@ <section id="js-target">Come here please.</section> | ||
```js | ||
import LocomotiveScroll from 'locomotive-scroll'; | ||
import LocomotiveScroll from '@studio-freight/locomotive-scroll'; | ||
@@ -130,7 +142,7 @@ const scroll = new LocomotiveScroll(); | ||
```js | ||
import LocomotiveScroll from 'locomotive-scroll'; | ||
import LocomotiveScroll from '@studio-freight/locomotive-scroll'; | ||
const scroll = new LocomotiveScroll(); | ||
scroll.on('call', func => { | ||
scroll.on('call', (func) => { | ||
// Using modularJS | ||
@@ -146,77 +158,82 @@ this.call(...func); | ||
| Option | Type | Default | Description | | ||
| ----------------------- | --------- | ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ||
| `el` | `object` | `document` | Scroll container element. | | ||
| `name` | `string` | `'scroll'` | Data attribute prefix (`data-scroll-xxxx`). | | | ||
| `offset` | `array(2)`| `[0,0]` | Global in-view trigger offset : `[bottom,top]`<br>Use a string with `%` to use a percentage of the viewport height.<br>Use a numeric value for absolute pixels unit.<br>E.g. `["30%",0]`, `[100,0]`, `["30%", 100]` | | ||
| `repeat` | `boolean` | `false` | Repeat in-view detection. | | ||
| `smooth` | `boolean` | `false` | Smooth scrolling. | | ||
| `initPosition` | `object` | `{ x: 0, y: 0 }` | ![Smooth only][smooth-only]<br>An `object` defining the initial scroll coordinates on a smooth instance. For example: `{ x: 0, y: 1000 }` | | ||
| `direction` | `string` | `vertical` | ![Smooth only][smooth-only]<br>Scroll direction: `vertical` or `horizontal` | | ||
| `lerp` | `number` | `0.1` | ![Smooth only][smooth-only]<br>Linear interpolation (lerp) intensity. Float between `0` and `1`.<br>This defines the "smoothness" intensity. The closer to `0`, the smoother. | | ||
| `getDirection` | `boolean` | `false` | Add direction to scroll event. | | ||
| `getSpeed` | `boolean` | `false` | Add speed to scroll event. | | ||
| `class` | `string` | `is-inview` | Element in-view class. | | ||
| `initClass` | `string` | `has-scroll-init` | Initialize class. | | ||
| `scrollingClass` | `string` | `has-scroll-scrolling` | Is scrolling class. | | ||
| `draggingClass` | `string` | `has-scroll-dragging` | Is dragging class. | | ||
| `smoothClass` | `string` | `has-scroll-smooth` | Has smooth scrolling class. | | ||
| `scrollbarContainer` | `object` | `false` | ![Smooth only][smooth-only]<br>Specifies the container element for the scrollbar to be appended in. If false, scrollbar will be appended to the body. | | ||
| `scrollbarClass` | `string` | `c-scrollbar` | ![Smooth only][smooth-only]<br>Scrollbar element class. | | ||
| `multiplier` | `number` | `1` | ![Smooth only][smooth-only]<br>Factor applied to the scroll delta, allowing to boost/reduce scrolling speed (regardless of the platform). | | ||
| `firefoxMultiplier` | `number` | `50` | ![Smooth only][smooth-only]<br>Boost scrolling speed of Firefox on Windows. | | ||
| `touchMultiplier` | `number` | `2` | ![Smooth only][smooth-only]<br>Multiply touch action to scroll faster than finger movement. | | ||
| `scrollFromAnywhere` | `boolean` | `false` | ![Smooth only][smooth-only]<br>By default locomotive-scroll listens for scroll events only on the scroll container (`el` option). With this option set to true, it listens on the whole document instead. | | ||
| `gestureDirection` | `string` | `vertical` | ![Smooth only][smooth-only]<br>Defines which gesture direction(s) scrolls in your instance. You can use : <ul><li>`vertical`</li><li>`horizontal`</li><li>`both`</li></ul> | | ||
| `tablet` & `smartphone` | `object` | | Object allowing to override some options for a particular context. You can specify: <ul><li>`smooth`</li><li>`direction`</li><li>`horizontalGesture`</li></ul>For `tablet` context you can also define `breakpoint` (_integer_, defaults to 1024) to set the max-width breakpoint for tablets. | | ||
| `reloadOnContextChange` | `boolean` | `false` | Allows to reload the page when switching between `desktop`, `tablet` and `smartphone` contexts. It can be useful if your page changes a lot between contexts and you want to reset everything. | | ||
| `resetNativeScroll` | `boolean` | `true` | Sets `history.scrollRestoration = 'manual'` and calls `window.scrollTo(0, 0)` on locomotive-scroll init in Native Class. Useful if you use transitions with native scrolling, otherwise we advise to set it to `false` if you don't want to break History API's scroll restoration feature. | | ||
| `autoRaf` | `boolean` | `true` | Defines if locomotive-scroll should use its own raf or a custom one. If `true` you have to trigger `.raf()` manually. | | ||
| Option | Type | Default | Description | | ||
| ----------------------- | ---------- | ---------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ||
| `el` | `object` | `document` | Scroll container element. | | ||
| `name` | `string` | `'scroll'` | Data attribute prefix (`data-scroll-xxxx`). | | | ||
| `offset` | `array(2)` | `[0,0]` | Global in-view trigger offset : `[bottom,top]`<br>Use a string with `%` to use a percentage of the viewport height.<br>Use a numeric value for absolute pixels unit.<br>E.g. `["30%",0]`, `[100,0]`, `["30%", 100]` | | ||
| `repeat` | `boolean` | `false` | Repeat in-view detection. | | ||
| `smooth` | `boolean` | `false` | Smooth scrolling. | | ||
| `initPosition` | `object` | `{ x: 0, y: 0 }` | ![Smooth only][smooth-only]<br>An `object` defining the initial scroll coordinates on a smooth instance. For example: `{ x: 0, y: 1000 }` | | ||
| `direction` | `string` | `vertical` | ![Smooth only][smooth-only]<br>Scroll direction: `vertical` or `horizontal` | | ||
| `lerp` | `number` | `0.1` | ![Smooth only][smooth-only]<br>Linear interpolation (lerp) intensity. Float between `0` and `1`.<br>This defines the "smoothness" intensity. The closer to `0`, the smoother. | | ||
| `getDirection` | `boolean` | `false` | Add direction to scroll event. | | ||
| `getSpeed` | `boolean` | `false` | Add speed to scroll event. | | ||
| `class` | `string` | `is-inview` | Element in-view class. | | ||
| `initClass` | `string` | `has-scroll-init` | Initialize class. | | ||
| `scrollingClass` | `string` | `has-scroll-scrolling` | Is scrolling class. | | ||
| `draggingClass` | `string` | `has-scroll-dragging` | Is dragging class. | | ||
| `smoothClass` | `string` | `has-scroll-smooth` | Has smooth scrolling class. | | ||
| `scrollbarContainer` | `object` | `false` | ![Smooth only][smooth-only]<br>Specifies the container element for the scrollbar to be appended in. If false, scrollbar will be appended to the body. | | ||
| `scrollbarClass` | `string` | `c-scrollbar` | ![Smooth only][smooth-only]<br>Scrollbar element class. | | ||
| `multiplier` | `number` | `1` | ![Smooth only][smooth-only]<br>Factor applied to the scroll delta, allowing to boost/reduce scrolling speed (regardless of the platform). | | ||
| `firefoxMultiplier` | `number` | `50` | ![Smooth only][smooth-only]<br>Boost scrolling speed of Firefox on Windows. | | ||
| `touchMultiplier` | `number` | `2` | ![Smooth only][smooth-only]<br>Multiply touch action to scroll faster than finger movement. | | ||
| `scrollFromAnywhere` | `boolean` | `false` | ![Smooth only][smooth-only]<br>By default locomotive-scroll listens for scroll events only on the scroll container (`el` option). With this option set to true, it listens on the whole document instead. | | ||
| `gestureDirection` | `string` | `vertical` | ![Smooth only][smooth-only]<br>Defines which gesture direction(s) scrolls in your instance. You can use : <ul><li>`vertical`</li><li>`horizontal`</li><li>`both`</li></ul> | | ||
| `tablet` & `smartphone` | `object` | | Object allowing to override some options for a particular context. You can specify: <ul><li>`smooth`</li><li>`direction`</li><li>`horizontalGesture`</li></ul>For `tablet` context you can also define `breakpoint` (_integer_, defaults to 1024) to set the max-width breakpoint for tablets. | | ||
| `reloadOnContextChange` | `boolean` | `false` | Allows to reload the page when switching between `desktop`, `tablet` and `smartphone` contexts. It can be useful if your page changes a lot between contexts and you want to reset everything. | | ||
| `resetNativeScroll` | `boolean` | `true` | Sets `history.scrollRestoration = 'manual'` and calls `window.scrollTo(0, 0)` on locomotive-scroll init in Native Class. Useful if you use transitions with native scrolling, otherwise we advise to set it to `false` if you don't want to break History API's scroll restoration feature. | | ||
| `autoRaf` | `boolean` | `true` | Defines if locomotive-scroll should use its own raf or a custom one. If `true` you have to trigger `.raf()` manually. | | ||
## Element attributes | ||
| Attribute | Values | Description | | ||
| ----------------------- | ------------------------ | ---------------------------------------------------------------------------------------- | | ||
| `data-scroll` | | Detect if in-view. | | ||
| `data-scroll-id` | `string` | (Optional) Useful if you want to scope your element and get the progress of your element in the viewport for example. | | ||
| `data-scroll-container` | | Defines the scroll container. Required for [basic styling](https://github.com/locomotivemtl/locomotive-scroll/blob/master/dist/locomotive-scroll.css). | | ||
| `data-scroll-section` | | Defines a scrollable section. Splitting your page into sections may improve performance. | | ||
| `data-scroll-class` | `string` | Element in-view class. | | ||
| `data-scroll-offset` | `string` | Element in-view trigger offset : `bottom,top`<br>First value is `bottom` offset, second (optional) is `top` offset.<br> Percent is relative to viewport height, otherwise it's absolute pixels.<br>E.g. `"10"`, `"100,50%"`, `"25%, 15%"` | | ||
| `data-scroll-repeat` | `boolean` | Element in-view detection repeat. | | ||
| `data-scroll-call` | `string` | Element in-view trigger call event. | | ||
| `data-scroll-position` | `string` | `top`, `bottom`, `left` or `right`<br>Window position of in-view trigger. | | ||
| `data-scroll-speed` | `number` | ![Smooth only][smooth-only]<br>Element parallax speed. A negative value will reverse the direction. | | ||
| `data-scroll-delay` | `number` | ![Smooth only][smooth-only]<br>Element's parallax lerp delay. | | ||
| `data-scroll-direction` | `string` | ![Smooth only][smooth-only]<br>Element's parallax direction. `vertical` or `horizontal` | | ||
| `data-scroll-sticky` | | ![Smooth only][smooth-only]<br>Sticky element. Starts and stops at `data-scroll-target` position. | | ||
| `data-scroll-target` | `string` | ![Smooth only][smooth-only]<br>Target element's in-view position. | | ||
| Attribute | Values | Description | | ||
| ----------------------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ||
| `data-scroll` | | Detect if in-view. | | ||
| `data-scroll-id` | `string` | (Optional) Useful if you want to scope your element and get the progress of your element in the viewport for example. | | ||
| `data-scroll-container` | | Defines the scroll container. Required for [basic styling](https://github.com/studio-freight/locomotive-scroll/blob/master/dist/locomotive-scroll.css). | | ||
| `data-scroll-section` | | Defines a scrollable section. Splitting your page into sections may improve performance. | | ||
| `data-scroll-class` | `string` | Element in-view class. | | ||
| `data-scroll-offset` | `string` | Element in-view trigger offset : `bottom,top`<br>First value is `bottom` offset, second (optional) is `top` offset.<br> Percent is relative to viewport height, otherwise it's absolute pixels.<br>E.g. `"10"`, `"100,50%"`, `"25%, 15%"` | | ||
| `data-scroll-repeat` | `boolean` | Element in-view detection repeat. | | ||
| `data-scroll-call` | `string` | Element in-view trigger call event. | | ||
| `data-scroll-position` | `string` | `top`, `bottom`, `left` or `right`<br>Window position of in-view trigger. | | ||
| `data-scroll-speed` | `number` | ![Smooth only][smooth-only]<br>Element parallax speed. A negative value will reverse the direction. | | ||
| `data-scroll-delay` | `number` | ![Smooth only][smooth-only]<br>Element's parallax lerp delay. | | ||
| `data-scroll-direction` | `string` | ![Smooth only][smooth-only]<br>Element's parallax direction. `vertical` or `horizontal` | | ||
| `data-scroll-sticky` | | ![Smooth only][smooth-only]<br>Sticky element. Starts and stops at `data-scroll-target` position. | | ||
| `data-scroll-target` | `string` | ![Smooth only][smooth-only]<br>Target element's in-view position. | | ||
## Instance methods | ||
| Method | Description | Arguments | | ||
| -------------------------- | ------------------------------ | ------------------------------------------------------------------------------- | | ||
| `init()` | Reinitializes the scroll. | | | ||
| `on(eventName, function)` | Listen [instance events] ⬇. | | | ||
| `update()` | Updates all element positions. | | | ||
| `destroy()` | Destroys the scroll events. | | | ||
| `start()` | Restarts the scroll events. | | | ||
| `stop()` | Stops the scroll events. | | | ||
| `scrollTo(target, options)`| Scroll to a target. | <div>`target`: Defines where you want to scroll. Available values types are :<ul><li>`node` : a dom element</li><li>`string` : you can type your own selector, or use values `"top"` and `"bottom"` to reach scroll boundaries</li><li>`int` : An absolute scroll coordinate in pixels</li></ul></div><div>`options` (optional, _object_) : Settings object. Available values are: <ul><li>`offset` (_integer_) : Defines an offset from your target. E.g. `-100` if you want to scroll 100 pixels above your target</li><li>`callback` (_function_) : Called when scrollTo completes (note that it won't wait for lerp to stabilize)</li><li>`duration` (_integer_) : Defines the duration of the scroll animation in milliseconds. Defaults to `1000`<br>![Smooth only][smooth-only]</li><li>`easing` (_array_) : An `array` of 4 floats between 0 and 1 defining the bezier curve for the animation's easing. <br>Defaults to `[0.25, 0.00, 0.35, 1.00]`<br>See [http://greweb.me/bezier-easing-editor/example/](http://greweb.me/bezier-easing-editor/example/)<br>*Keep in mind this will also be affected by the lerp unless you set `disableLerp` to `true`*.<br>![Smooth only][smooth-only]</li><li>`disableLerp` (_boolean_) : Lerp effect won't be applied if set to `true`<br>![Smooth only][smooth-only]</li></ul> | | ||
| Method | Description | Arguments | | ||
| --------------------------- | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | ||
| `init()` | Reinitializes the scroll. | | | ||
| `on(eventName, function)` | Listen [instance events] ⬇. | | | ||
| `update()` | Updates all element positions. | | | ||
| `destroy()` | Destroys the scroll events. | | | ||
| `start()` | Restarts the scroll events. | | | ||
| `stop()` | Stops the scroll events. | | | ||
| `scrollTo(target, options)` | Scroll to a target. | <div>`target`: Defines where you want to scroll. Available values types are :<ul><li>`node` : a dom element</li><li>`string` : you can type your own selector, or use values `"top"` and `"bottom"` to reach scroll boundaries</li><li>`int` : An absolute scroll coordinate in pixels</li></ul></div><div>`options` (optional, _object_) : Settings object. Available values are: <ul><li>`offset` (_integer_) : Defines an offset from your target. E.g. `-100` if you want to scroll 100 pixels above your target</li><li>`callback` (_function_) : Called when scrollTo completes (note that it won't wait for lerp to stabilize)</li><li>`duration` (_integer_) : Defines the duration of the scroll animation in milliseconds. Defaults to `1000`<br>![Smooth only][smooth-only]</li><li>`easing` (_array_) : An `array` of 4 floats between 0 and 1 defining the bezier curve for the animation's easing. <br>Defaults to `[0.25, 0.00, 0.35, 1.00]`<br>See [http://greweb.me/bezier-easing-editor/example/](http://greweb.me/bezier-easing-editor/example/)<br>_Keep in mind this will also be affected by the lerp unless you set `disableLerp` to `true`_.<br>![Smooth only][smooth-only]</li><li>`disableLerp` (_boolean_) : Lerp effect won't be applied if set to `true`<br>![Smooth only][smooth-only]</li></ul> | | ||
## Instance events | ||
| Event | Arguments | Description | | ||
| -------- | --------- | --------------------------------------------------------------------- | | ||
| `scroll` | `obj` | Returns scroll instance (position, limit, speed, direction and current in-view elements). | | ||
| `call` | `func` | Trigger if in-view. Returns your `string` or `array` if contains `,`. | | ||
| Event | Arguments | Description | | ||
| -------- | --------- | ----------------------------------------------------------------------------------------- | | ||
| `scroll` | `obj` | Returns scroll instance (position, limit, speed, direction and current in-view elements). | | ||
| `call` | `func` | Trigger if in-view. Returns your `string` or `array` if contains `,`. | | ||
## Progressive playing animations example (like gsap) | ||
All `data-scroll` elements have a progress value. | ||
In the on scroll event you can get all current in-view elements. | ||
#### HTML | ||
```html | ||
<h1 data-scroll data-scroll-id="hey">Hey</h1> | ||
``` | ||
#### JS | ||
```js | ||
@@ -234,17 +251,15 @@ scroll.on('scroll', (args) => { | ||
## Dependencies | ||
| Name | Description | | ||
| ---------------- | ------------------------------------------------------------------ | | ||
| [Virtual Scroll] | Custom scroll event with inertia/momentum. | | ||
| [modularScroll] | Elements in viewport detection. Forked from it, not a dependency. | | ||
| [bezier-easing] | Allows to define an easing to `scrollTo` movement | | ||
| Name | Description | | ||
| ---------------- | ----------------------------------------------------------------- | | ||
| [Virtual Scroll] | Custom scroll event with inertia/momentum. | | ||
| [modularScroll] | Elements in viewport detection. Forked from it, not a dependency. | | ||
| [bezier-easing] | Allows to define an easing to `scrollTo` movement | | ||
[instance events]: #instance-events | ||
[Virtual Scroll]: https://github.com/ayamflow/virtual-scroll | ||
[modularScroll]: https://github.com/modularorg/modularscroll | ||
[virtual scroll]: https://github.com/ayamflow/virtual-scroll | ||
[modularscroll]: https://github.com/modularorg/modularscroll | ||
[bezier-easing]: https://github.com/gre/bezier-easing | ||
## Browser support | ||
@@ -258,27 +273,36 @@ | ||
```html | ||
<script nomodule src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.6.0/polyfill.min.js" crossorigin="anonymous"></script> | ||
<script nomodule src="https://polyfill.io/v3/polyfill.min.js?features=Object.assign%2CElement.prototype.append%2CNodeList.prototype.forEach%2CCustomEvent%2Csmoothscroll" crossorigin="anonymous"></script> | ||
<script | ||
nomodule | ||
src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.6.0/polyfill.min.js" | ||
crossorigin="anonymous" | ||
></script> | ||
<script | ||
nomodule | ||
src="https://polyfill.io/v3/polyfill.min.js?features=Object.assign%2CElement.prototype.append%2CNodeList.prototype.forEach%2CCustomEvent%2Csmoothscroll" | ||
crossorigin="anonymous" | ||
></script> | ||
``` | ||
## Who's using Locomotive Scroll? | ||
- [thierrychopain.com](https://thierrychopain.com/) | ||
- [clmt.paris](https://clmt.paris/) | ||
- [miragefestival.com/2020](https://www.miragefestival.com/2020/) | ||
- [mazellier.design](https://www.mazellier.design/) | ||
- [ccccontemple.com](https://ccccontemple.com/) | ||
- [abhishekjha.me/muteza](https://abhishekjha.me/muteza/) | ||
- [normal.studio](https://normal.studio/en/) | ||
- [mixlegno.com](https://www.mixlegno.com/) | ||
- [nfq.group](https://nfq.group/) | ||
- [works.studio](https://works.studio/) | ||
- [beangels.eu](https://www.beangels.eu/) | ||
- [izakaya-caen.fr](https://www.izakaya-caen.fr/) | ||
- [white-elephant.fr](https://www.white-elephant.fr/) | ||
- [henge07.com](https://www.henge07.com/) | ||
- [loirevalleylodges.com](https://loirevalleylodges.com/) | ||
- [thierrychopain.com](https://thierrychopain.com/) | ||
- [clmt.paris](https://clmt.paris/) | ||
- [miragefestival.com/2020](https://www.miragefestival.com/2020/) | ||
- [mazellier.design](https://www.mazellier.design/) | ||
- [ccccontemple.com](https://ccccontemple.com/) | ||
- [abhishekjha.me/muteza](https://abhishekjha.me/muteza/) | ||
- [normal.studio](https://normal.studio/en/) | ||
- [mixlegno.com](https://www.mixlegno.com/) | ||
- [nfq.group](https://nfq.group/) | ||
- [works.studio](https://works.studio/) | ||
- [beangels.eu](https://www.beangels.eu/) | ||
- [izakaya-caen.fr](https://www.izakaya-caen.fr/) | ||
- [white-elephant.fr](https://www.white-elephant.fr/) | ||
- [henge07.com](https://www.henge07.com/) | ||
- [loirevalleylodges.com](https://loirevalleylodges.com/) | ||
## Related | ||
- [Locomotive Boilerplate 🚂](https://github.com/locomotivemtl/locomotive-boilerplate) | ||
- [Locomotive Boilerplate 🚂](https://github.com/locomotivemtl/locomotive-boilerplate) | ||
[smooth-only]: https://img.shields.io/badge/smooth-only-blue |
@@ -89,4 +89,8 @@ import Core from './Core'; | ||
resize() { | ||
this.windowHeight = window.innerHeight; | ||
this.windowWidth = window.innerWidth; | ||
this.instance.limit.x = this.html.offsetWidth - this.windowWidth; | ||
this.instance.limit.y = this.html.offsetHeight - this.windowHeight; | ||
if (Object.entries(this.els).length) { | ||
this.windowHeight = window.innerHeight; | ||
this.updateElements(); | ||
@@ -93,0 +97,0 @@ } |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
373139
7152
295