react-just-parallax/dist/cjs/index.js

React library for scroll and mousemove parallax effect ✨ Open source, production-ready

"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=t(e);const r="undefined"!=typeof performance?()=>performance.now():()=>Date.now(),i="undefined"!=typeof window?e=>window.requestAnimationFrame(e):e=>setTimeout((()=>e(r())),16.666666666666668);let s=!0,o=!1,u=!1;const c={delta:0,timestamp:0},a=["read","update","preRender","render","postRender"],l=a.reduce(((e,t)=>(e[t]=function(e){let t=[],n=[],r=0,i=!1,s=!1;const o=new WeakSet,u={schedule:(e,s=!1,u=!1)=>{const c=u&&i,a=c?t:n;return s&&o.add(e),-1===a.indexOf(e)&&(a.push(e),c&&i&&(r=t.length)),e},cancel:e=>{const t=n.indexOf(e);-1!==t&&n.splice(t,1),o.delete(e)},process:c=>{if(i)s=!0;else{if(i=!0,[t,n]=[n,t],n.length=0,r=t.length,r)for(let n=0;n<r;n++){const r=t[n];r(c),o.has(r)&&(u.schedule(r),e())}i=!1,s&&(s=!1,u.process(c))}}};return u}((()=>o=!0)),e)),{}),d=a.reduce(((e,t)=>{const n=l[t];return e[t]=(e,t=!1,r=!1)=>(o||p(),n.schedule(e,t,r)),e}),{}),h=a.reduce(((e,t)=>(e[t]=l[t].cancel,e)),{});a.reduce(((e,t)=>(e[t]=()=>l[t].process(c),e)),{});const f=e=>l[e].process(c),v=e=>{o=!1,c.delta=s?16.666666666666668:Math.max(Math.min(e-c.timestamp,40),1),c.timestamp=e,u=!0,a.forEach(f),u=!1,o&&(s=!1,i(v))},p=()=>{o=!0,s=!0,u||i(v)};var w="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{},m=/^\s+|\s+$/g,y=/^[-+]0x[0-9a-f]+$/i,E=/^0b[01]+$/i,g=/^0o[0-7]+$/i,x=parseInt,_="object"==typeof w&&w&&w.Object===Object&&w,b="object"==typeof self&&self&&self.Object===Object&&self,L=_||b||Function("return this")(),R=Object.prototype.toString,O=Math.max,T=Math.min,M=function(){return L.Date.now()};function W(e){var t=typeof e;return!!e&&("object"==t||"function"==t)}function z(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return!!e&&"object"==typeof e}(e)&&"[object Symbol]"==R.call(e)}(e))return NaN;if(W(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=W(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=e.replace(m,"");var n=E.test(e);return n||g.test(e)?x(e.slice(2),n?2:8):y.test(e)?NaN:+e}var S=function(e,t,n){var r,i,s,o,u,c,a=0,l=!1,d=!1,h=!0;if("function"!=typeof e)throw new TypeError("Expected a function");function f(t){var n=r,s=i;return r=i=void 0,a=t,o=e.apply(s,n)}function v(e){return a=e,u=setTimeout(w,t),l?f(e):o}function p(e){var n=e-c;return void 0===c||n>=t||n<0||d&&e-a>=s}function w(){var e=M();if(p(e))return m(e);u=setTimeout(w,function(e){var n=t-(e-c);return d?T(n,s-(e-a)):n}(e))}function m(e){return u=void 0,h&&r?f(e):(r=i=void 0,o)}function y(){var e=M(),n=p(e);if(r=arguments,i=this,c=e,n){if(void 0===u)return v(c);if(d)return u=setTimeout(w,t),f(c)}return void 0===u&&(u=setTimeout(w,t)),o}return t=z(t)||0,W(n)&&(l=!!n.leading,s=(d="maxWait"in n)?O(z(n.maxWait)||0,t):s,h="trailing"in n?!!n.trailing:h),y.cancel=function(){void 0!==u&&clearTimeout(u),a=0,r=c=i=u=void 0},y.flush=function(){return void 0===u?o:m(M())},y},U={exports:{}},H="undefined"!=typeof document?document.createElement("p").style:{},C=["O","ms","Moz","Webkit"],j=/([A-Z])/g,k={};function D(e){if(e=e.replace(/-([a-z])/g,(function(e,t){return t.toUpperCase()})),void 0!==H[e])return e;for(var t=e.charAt(0).toUpperCase()+e.slice(1),n=C.length;n--;){var r=C[n]+t;if(void 0!==H[r])return r}return e}U.exports=function(e){return e in k?k[e]:k[e]=D(e)},U.exports.dash=function(e){return e=D(e),j.test(e)&&(e="-"+e.replace(j,"-$1"),j.lastIndex=0),e.toLowerCase()};const I={isReady:!1,scrollbarWidth:0,windowHeight:0,windowWidth:0},P=()=>{const[t,n]=e.useState(I),r=e.useRef(I),i=e.useCallback((()=>{const e={isReady:!0,scrollbarWidth:window.innerWidth-document.documentElement.clientWidth,windowHeight:window.innerHeight,windowWidth:window.innerWidth};n(e),r.current=e}),[]);return e.useEffect((()=>{const e=S(i,100);return window.addEventListener("resize",e),i(),()=>{window.removeEventListener("resize",e)}}),[i]),{windowSize:t,windowSizeRef:r}},$=(e,t,n)=>e+(t-e)*n;class X extends class{addEventListener(e,t){void 0===this._listeners&&(this._listeners={});const n=this._listeners;void 0===n[e]&&(n[e]=[]),-1===n[e].indexOf(t)&&n[e].push(t)}hasEventListener(e,t){if(void 0===this._listeners)return!1;const n=this._listeners;return void 0!==n[e]&&-1!==n[e].indexOf(t)}removeEventListener(e,t){if(void 0===this._listeners)return;const n=this._listeners[e];if(void 0!==n){const e=n.indexOf(t);-1!==e&&n.splice(e,1)}}dispatchEvent(e){if(void 0===this._listeners)return;const t=this._listeners[e.type];if(void 0!==t){e.target=this;const n=t.slice(0);for(let t=0,r=n.length;t<r;t++)n[t].call(this,e);e.target=null}}}{constructor(){super(),this._mouseLast={x:0,y:0},this._isTouching=!1,this.mouse={x:0,y:0},this._shouldUpdate=!1,this._onTouchDown=e=>{this._shouldUpdate&&(this._isTouching=!0,this._mouseLast.x="touches"in e?e.touches[0].clientX:e.clientX,this._mouseLast.y="touches"in e?e.touches[0].clientY:e.clientY,this.mouse.x=this._mouseLast.x,this.mouse.y=this._mouseLast.y,this.dispatchEvent({type:"down"}),this.dispatchEvent({type:"mousemove"}))},this._onTouchMove=e=>{if(!this._shouldUpdate)return;const t="touches"in e?e.touches[0].clientX:e.clientX,n="touches"in e?e.touches[0].clientY:e.clientY,r=t-this._mouseLast.x,i=n-this._mouseLast.y;this._mouseLast.x=t,this._mouseLast.y=n,this.mouse.x+=r,this.mouse.y+=i,this.dispatchEvent({type:"mousemove"})},this._onTouchUp=()=>{this._shouldUpdate&&(this._isTouching=!1,this.dispatchEvent({type:"up"}),this.dispatchEvent({type:"mousemove"}))},this._onMouseLeave=()=>{this.dispatchEvent({type:"left"})}}_addEvents(){this._targetEl.addEventListener("mousedown",this._onTouchDown),this._targetEl.addEventListener("mousemove",this._onTouchMove,{passive:!0}),this._targetEl.addEventListener("mouseup",this._onTouchUp),this._targetEl.addEventListener("touchstart",this._onTouchDown,{passive:!0}),this._targetEl.addEventListener("touchmove",this._onTouchMove,{passive:!0}),this._targetEl.addEventListener("touchend",this._onTouchUp),this._targetEl.addEventListener("mouseout",this._onMouseLeave)}_removeEvents(){this._targetEl.removeEventListener("mousedown",this._onTouchDown),this._targetEl.removeEventListener("mousemove",this._onTouchMove),this._targetEl.removeEventListener("mouseup",this._onTouchUp),this._targetEl.removeEventListener("touchstart",this._onTouchDown),this._targetEl.removeEventListener("touchmove",this._onTouchMove),this._targetEl.removeEventListener("touchend",this._onTouchUp),this._targetEl.removeEventListener("mouseout",this._onMouseLeave)}init(e){this._targetEl=window,e&&e.current&&(this._targetEl=e.current),this._addEvents()}destroy(){this._removeEvents()}setShouldUpdate(e){this._shouldUpdate=e}update(){this._mouseLast.x=this.mouse.x,this._mouseLast.y=this.mouse.y}}const Y=()=>"undefined"!=typeof window&&("ontouchstart"in window||"ontouchstart"in document.documentElement||navigator.maxTouchPoints>0),A={height:1,width:1,x:1,y:1},F={xMaxOffset:1,xOffset:1,yMaxOffset:1,yOffset:1},N=e.forwardRef(((t,r)=>{e.useImperativeHandle(r,(()=>({updateValues:k})));const{children:i,strength:s=.14,scrollContainerRef:o=null,enableOnTouchDevice:u=!0,lerpEase:c=.06,isHorizontal:a=!1,isAbsolutelyPositioned:l=!1,zIndex:f=null,shouldPause:v=!0}=t,p=e.useRef(null),w=e.useRef(null),m=e.useRef(1),y=e.useRef(1),E=e.useRef(1),g=e.useRef(1),x=e.useRef(null),_=e.useRef(null),b=e.useRef(!0),L=e.useRef(F),R=e.useRef(1),O=e.useRef(1),{windowSizeRef:T}=P(),M=e.useRef(U.exports("transform")),W=()=>{p.current&&(p.current.style.willChange="transform",x.current=d.render(H,!0),_.current=d.update(C,!0))},z=()=>{p.current&&(p.current.style.willChange="auto",x.current&&h.render(x.current),_.current&&h.update(_.current))},H=()=>{if(!b.current)return;if(!p.current)return;let e=a?1:0;p.current.style[M.current]=`translate3d(${m.current*s*e}px, ${y.current*s*(1-e)}px, 0px)`},C=({delta:e})=>{if(!b.current)return;const t=Math.abs(E.current-m.current),n=Math.abs(g.current-y.current);if(t<.001&&n<.001)return;let r=e/16.666666666666668;const i=Math.round(r);i>=1&&(r=i);const s=$(m.current,E.current,c*r);m.current=s;const o=$(y.current,g.current,c*r);y.current=o},j=()=>{document.hidden?z():W()},k=()=>{(()=>{if(!w||!w.current)return;I();const e=w.current.getBoundingClientRect();R.current=L.current.xOffset+e.x+.5*e.width,O.current=L.current.yOffset+e.y+.5*e.height})(),X()},D=S(k,150),I=()=>{var e;o&&o.current?L.current={xOffset:(e=o.current).scrollLeft,yOffset:e.scrollTop,xMaxOffset:e.scrollWidth-e.offsetWidth,yMaxOffset:e.scrollHeight-e.offsetHeight}:L.current={xOffset:window.pageXOffset,yOffset:window.pageYOffset,xMaxOffset:document.body.clientWidth-window.innerWidth,yMaxOffset:document.body.clientHeight-window.innerHeight}},X=()=>{I();let e=L.current.xOffset-R.current,t=L.current.yOffset-O.current;if(e+=.5*T.current.windowWidth,t+=.5*T.current.windowHeight,E.current=e,g.current=t,Math.abs(g.current)>1.5*T.current.windowHeight||Math.abs(E.current)>1.5*T.current.windowWidth){if(!v)return;b.current=!1}else b.current=!0};return e.useEffect((()=>{if(!u&&Y())return;W();let e=window;return o&&o.current&&(e=o.current),e.addEventListener("scroll",X,{passive:!0}),window.addEventListener("visibilitychange",j),window.addEventListener("resize",D),k(),()=>{z(),e.removeEventListener("scroll",X),window.removeEventListener("visibilitychange",j),window.removeEventListener("resize",D)}}),[]),n.default.createElement(n.default.Fragment,null,n.default.createElement("span",{ref:w,style:{width:"100%",height:"100%",display:"inline-block",userSelect:"none",pointerEvents:"none",position:l?"absolute":"relative",top:0,left:0,zIndex:f||"initial"}},n.default.createElement("span",{ref:p,style:{backfaceVisibility:"hidden",position:"relative",width:"100%",height:"100%",display:"inline-block",userSelect:"initial",pointerEvents:"initial"}},i)))}));exports.MouseParallax=t=>{const{children:r,strength:i=.14,parallaxContainerRef:s=null,scrollContainerRef:o=null,shouldResetPosition:u=!1,enableOnTouchDevice:c=!1,isAbsolutelyPositioned:a=!1,lerpEase:l=.06,zIndex:f=null,shouldPause:v=!0}=t,{windowSizeRef:p}=P(),w=e.useRef(null),m=e.useRef(null),y=e.useRef(0),E=e.useRef(0),g=e.useRef(0),x=e.useRef(0),_=e.useRef(null),b=e.useRef(null),L=e.useRef(!0),R=e.useRef(A),O=e.useRef(new X),T=e.useRef(null),M=e.useRef(U.exports("transform")),W=()=>{L.current&&w.current&&(w.current.style.willChange="transform",_.current=d.render(H,!0),b.current=d.update(C,!0))},z=()=>{w.current&&(w.current.style.willChange="auto",_.current&&h.render(_.current),b.current&&h.update(b.current))},H=()=>{if(!w.current)return;let e=p.current.windowWidth,t=p.current.windowHeight;s&&s.current&&(e=R.current.width,t=R.current.height),e*=.5,t*=.5,e*=i,t*=i,w.current.style[M.current]=`translate3d(${y.current*e}px, ${E.current*t}px, 0px)`},C=({delta:e})=>{const t=Math.abs(g.current-y.current),n=Math.abs(x.current-E.current);if(t<.001&&n<.001)return;let r=e/16.666666666666668;O.current.update();const i=Math.round(r);i>=1&&(r=i);const s=$(y.current,g.current,l*r);y.current=s;const o=$(E.current,x.current,l*r);E.current=o},j=()=>{document.hidden?z():W()},k=(e,t)=>{let n=p.current.windowWidth,r=p.current.windowHeight,i=e,o=t;return s&&s.current&&(n=R.current.width,r=R.current.height,i=e-R.current.x,o=t-R.current.y),{x:i/n*2-1,y:o/r*2-1}},D=e=>{const t=e.target.mouse.x,n=e.target.mouse.y,{x:r,y:i}=k(t,n);g.current=r,x.current=i},I=()=>{u&&(g.current=0,x.current=0)},F=e=>{const t="touches"in e?e.touches[0].clientX:e.clientX,n="touches"in e?e.touches[0].clientY:e.clientY,{x:r,y:i}=k(t,n);(r<=-1||r>=1||i>=1||i<=-1)&&I()},N=()=>{if(!s||!s.current)return;const e=s.current.getBoundingClientRect();R.current={x:e.x,y:e.y,width:s.current.clientWidth,height:s.current.clientHeight}},V=S(N,150),q=e=>{if(e[0].isIntersecting)L.current=!0,W(),O.current.setShouldUpdate(!0);else{if(!v)return;L.current=!1,z(),O.current.setShouldUpdate(!1)}};return e.useEffect((()=>{if(!c&&Y())return;O.current.init(s),W();let e=window,t=window;return o&&o.current&&(t=o.current),s&&s.current&&(N(),e=s.current,t.addEventListener("scroll",V,{passive:!0}),window.addEventListener("resize",V,{passive:!0})),O.current.addEventListener("mousemove",D),window.addEventListener("visibilitychange",j),window.addEventListener("touchstart",F,{passive:!0}),e.addEventListener("mouseout",I),T.current=new IntersectionObserver(q,{threshold:.5}),m.current&&T.current.observe(m.current),()=>{z(),s&&s.current&&(t.removeEventListener("scroll",V),window.removeEventListener("resize",V)),O.current.removeEventListener("mousemove",D),window.removeEventListener("visibilitychange",j),window.removeEventListener("touchstart",F),e.removeEventListener("mouseout",I),m.current&&T.current&&T.current.unobserve(m.current),O.current.destroy()}}),[]),n.default.createElement(n.default.Fragment,null,n.default.createElement("span",{ref:m,style:{width:"100%",height:"100%",display:"inline-block",userSelect:"none",pointerEvents:"none",position:a?"absolute":"relative",top:0,left:0,zIndex:f||"initial"}},n.default.createElement("span",{ref:w,style:{backfaceVisibility:"hidden",position:"relative",width:"100%",height:"100%",display:"inline-block",userSelect:"initial",pointerEvents:"initial"}},r)))},exports.ScrollParallax=N;
//# sourceMappingURL=index.js.map