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