@react-spring/parallax
Version:
```bash yarn add @react-spring/parallax ```
1 lines • 3.85 kB
JavaScript
import*as e from"react";import{useContext as t,useEffect as n,useRef as r,useState as i}from"react";import{raf as a,useMemoOne as o,useOnce as s}from"@react-spring/shared";import{Controller as c,a as l,config as u}from"@react-spring/web";const d=e.createContext(null);function f(e){return e?`scrollLeft`:`scrollTop`}function p(t,n){let r=t=>t.type?t.type===e.Fragment:t===e.Fragment;return e.Children.map(t,e=>r(e)?p(e.props.children,n):n(e))}const m=`translate3d(0px,0px,0px)`,h=`translate(0px,0px)`,g=e.memo(e.forwardRef(({horizontal:n,factor:i=1,offset:a=0,speed:u=0,sticky:f,...p},m)=>{let h=t(d),g=o(()=>{let e;if(f)e=(f.start||0)*h.space;else{let t=Math.floor(a)*h.space,n=h.space*a+t*u;e=-(h.current*u)+n}return new c({space:f?h.space:h.space*i,translate:e})},[]),_=o(()=>({horizontal:n===void 0||f?h.horizontal:n,sticky:void 0,isSticky:!1,setPosition(e,t,n=!1){if(f)y(e,t);else{let r=Math.floor(a)*e,i=e*a+r*u;g.start({translate:-(t*u)+i,config:h.config,immediate:n})}},setHeight(e,t=!1){g.start({space:f?e:e*i,config:h.config,immediate:t})}}),[]);s(()=>{if(f){let e=f.start||0;_.sticky={start:e,end:f.end||e+1}}}),e.useImperativeHandle(m,()=>_);let v=r(void 0),y=(e,t)=>{let n=_.sticky.start*e,r=_.sticky.end*e,i=t>=n&&t<=r;if(i===_.isSticky)return;_.isSticky=i;let a=v.current;a.style.position=i?`sticky`:`absolute`,g.set({translate:i?0:t<n?n:r})};s(()=>{if(h)return h.layers.add(_),h.update(),()=>{h.layers.delete(_),h.update()}});let b=g.springs.translate.to(_.horizontal?e=>`translate3d(${e}px,0,0)`:e=>`translate3d(0,${e}px,0)`);return e.createElement(l.div,{...p,ref:v,style:{position:`absolute`,top:0,bottom:0,left:0,right:0,backgroundSize:`auto`,backgroundRepeat:`no-repeat`,willChange:`transform`,[_.horizontal?`height`:`width`]:`100%`,[_.horizontal?`width`:`height`]:g.springs.space,WebkitTransform:b,msTransform:b,transform:b,...p.style}})})),_=e.memo(e.forwardRef((t,g)=>{let[_,v]=i(!1),{pages:y,innerStyle:b,config:x=u.slow,enabled:S=!0,horizontal:C=!1,children:w,...T}=t,E=r(void 0),D=r(void 0),O=o(()=>({config:x,horizontal:C,busy:!1,space:0,current:0,offset:0,controller:new c({scroll:0}),layers:new Set,container:E,content:D,update:()=>k(),scrollTo:e=>A(e),stop:()=>O.controller.stop()}),[]);n(()=>{O.config=x},[x]),e.useImperativeHandle(g,()=>O);let k=()=>{let e=E.current;if(!e)return;O.space=e[C?`clientWidth`:`clientHeight`];let t=f(C);S?O.current=e[t]:e[t]=O.current=O.offset*O.space;let n=D.current;if(n){let e=C?`width`:`height`;n.style[e]=`${O.space*y}px`}O.layers.forEach(e=>{e.setHeight(O.space,!0),e.setPosition(O.space,O.current,!0)})},A=e=>{let t=E.current,n=f(C);O.offset=e,O.controller.set({scroll:O.current}),O.controller.stop().start({scroll:e*O.space,config:x,onChange({value:{scroll:e}}){t[n]=e}})},j=e=>{O.busy||(O.busy=!0,O.current=e.target[f(C)],a.onStart(()=>{O.layers.forEach(e=>e.setPosition(O.space,O.current)),O.busy=!1}))};n(()=>O.update()),s(()=>{v(!0);let e=()=>{let e=()=>O.update();a.onFrame(e),setTimeout(e,150)};return window.addEventListener(`resize`,e,!1),()=>window.removeEventListener(`resize`,e,!1)});let M=S?{overflowY:C?`hidden`:`scroll`,overflowX:C?`scroll`:`hidden`}:{overflowY:`hidden`,overflowX:`hidden`};return e.createElement(l.div,{...T,ref:E,onScroll:j,onWheel:S?O.stop:void 0,onTouchStart:S?O.stop:void 0,style:{position:`absolute`,top:0,left:0,width:`100%`,height:`100%`,...M,WebkitOverflowScrolling:`touch`,WebkitTransform:h,msTransform:h,transform:m,...T.style}},_&&e.createElement(e.Fragment,null,e.createElement(l.div,{ref:D,style:{overflow:`hidden`,position:`absolute`,[C?`height`:`width`]:`100%`,[C?`width`:`height`]:O.space*y,WebkitTransform:h,msTransform:h,transform:m,...t.innerStyle}},e.createElement(d.Provider,{value:O},p(w,e=>!e.props.sticky&&e))),e.createElement(d.Provider,{value:O},p(w,e=>e.props.sticky&&e))))}));export{_ as Parallax,g as ParallaxLayer};