dash-parallax-scroll
Advanced tools
Comparing version
export { default as ParallaxProvider, useParallaxScrollContext } from './ParallaxProvider'; | ||
export { default as useParallaxScroll } from './useParallaxScroll'; | ||
export { useBrightness } from './useBrightness'; | ||
export { default as useParallax } from './useParallax'; | ||
export { useBrightness } from './useBrightness'; | ||
export type { ParallaxOptions, BrightnessOptions, ParallaxContextValue, UseParallaxReturn, UseParallaxProviderReturn, UseParallaxScrollReturn, Position, ElementCache, BrightnessElementCache, } from './utils/types'; | ||
export { lerp, calculateParallaxTargetPosition as calculateParallax, calculateScaleValue as calculateScale, calculateBrightness, } from './utils/calculations'; |
@@ -1,1 +0,1 @@ | ||
import e,{useRef as t,useCallback as r,useEffect as n,useMemo as s,createContext as a,useContext as o,useState as i}from"react";var l,c,u={exports:{}},f={},g={};"production"===process.env.NODE_ENV?u.exports=function(){if(l)return f;l=1;var e=Symbol.for("react.transitional.element"),t=Symbol.for("react.fragment");function r(t,r,n){var s=null;if(void 0!==n&&(s=""+n),void 0!==r.key&&(s=""+r.key),"key"in r)for(var a in n={},r)"key"!==a&&(n[a]=r[a]);else n=r;return r=n.ref,{$$typeof:e,type:t,key:s,ref:void 0!==r?r:null,props:n}}return f.Fragment=t,f.jsx=r,f.jsxs=r,f}():u.exports=(c||(c=1,"production"!==process.env.NODE_ENV&&function(){function t(e){if(null==e)return null;if("function"==typeof e)return e.$$typeof===P?null:e.displayName||e.name||null;if("string"==typeof e)return e;switch(e){case d:return"Fragment";case h:return"Profiler";case b:return"StrictMode";case S:return"Suspense";case x:return"SuspenseList";case E:return"Activity"}if("object"==typeof e)switch(e.tag,e.$$typeof){case p:return"Portal";case y:return(e.displayName||"Context")+".Provider";case m:return(e._context.displayName||"Context")+".Consumer";case v:var r=e.render;return(e=e.displayName)||(e=""!==(e=r.displayName||r.name||"")?"ForwardRef("+e+")":"ForwardRef"),e;case O:return null!==(r=e.displayName||null)?r:t(e.type)||"Memo";case w:r=e._payload,e=e._init;try{return t(e(r))}catch(e){}}return null}function r(e){return""+e}function n(e){try{r(e);var t=!1}catch(e){t=!0}if(t){var n=(t=console).error,s="function"==typeof Symbol&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return n.call(t,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",s),r(e)}}function s(e){if(e===d)return"<>";if("object"==typeof e&&null!==e&&e.$$typeof===w)return"<...>";try{var r=t(e);return r?"<"+r+">":"<...>"}catch(e){return"<...>"}}function a(){return Error("react-stack-top-frame")}function o(){var e=t(this.type);return _[e]||(_[e]=!0),void 0!==(e=this.props.ref)?e:null}function i(e,r,s,a,i,u,g,p){var d,b=r.children;if(void 0!==b)if(a){if(M(b)){for(a=0;a<b.length;a++)l(b[a]);Object.freeze&&Object.freeze(b)}}else l(b);if(B.call(r,"key")){b=t(e);var h=Object.keys(r).filter(function(e){return"key"!==e});a=h.length>0?"{key: someKey, "+h.join(": ..., ")+": ...}":"{key: someKey}",$[b+a]||(h=h.length>0?"{"+h.join(": ..., ")+": ...}":"{}",$[b+a]=!0)}if(b=null,void 0!==s&&(n(s),b=""+s),function(e){if(B.call(e,"key")){var t=Object.getOwnPropertyDescriptor(e,"key").get;if(t&&t.isReactWarning)return!1}return void 0!==e.key}(r)&&(n(r.key),b=""+r.key),"key"in r)for(var m in s={},r)"key"!==m&&(s[m]=r[m]);else s=r;return b&&function(e){function t(){c||(c=!0)}t.isReactWarning=!0,Object.defineProperty(e,"key",{get:t,configurable:!0})}(s,"function"==typeof e&&(e.displayName||e.name)),function(e,t,r,n,s,a,i,l){return r=a.ref,Object.defineProperty(e={$$typeof:f,type:e,key:t,props:a,_owner:s},"ref",null!==(void 0!==r?r:null)?{enumerable:!1,get:o}:{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:i}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:l}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}(e,b,u,0,null===(d=k.A)?null:d.getOwner(),s,g,p)}function l(e){"object"==typeof e&&null!==e&&e.$$typeof===f&&e._store&&(e._store.validated=1)}var c,u=e,f=Symbol.for("react.transitional.element"),p=Symbol.for("react.portal"),d=Symbol.for("react.fragment"),b=Symbol.for("react.strict_mode"),h=Symbol.for("react.profiler"),m=Symbol.for("react.consumer"),y=Symbol.for("react.context"),v=Symbol.for("react.forward_ref"),S=Symbol.for("react.suspense"),x=Symbol.for("react.suspense_list"),O=Symbol.for("react.memo"),w=Symbol.for("react.lazy"),E=Symbol.for("react.activity"),P=Symbol.for("react.client.reference"),k=u.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,B=Object.prototype.hasOwnProperty,M=Array.isArray,j=console.createTask?console.createTask:function(){return null},_={},F=(u={"react-stack-bottom-frame":function(e){return e()}})["react-stack-bottom-frame"].bind(u,a)(),A=j(s(a)),$={};g.Fragment=d,g.jsx=function(e,t,r,n,a){var o=1e4>k.recentlyCreatedOwnerStacks++;return i(e,t,r,!1,0,a,o?Error("react-stack-top-frame"):F,o?j(s(e)):A)},g.jsxs=function(e,t,r,n,a){var o=1e4>k.recentlyCreatedOwnerStacks++;return i(e,t,r,!0,0,a,o?Error("react-stack-top-frame"):F,o?j(s(e)):A)}}()),g);var p=u.exports;const d=(e,t,r)=>e+(t-e)*r,b=(e,t,r,n)=>{let s=r.get(e);if(!s){const t=[n,".picture","picture","img","video",'[class*="image"]','[class*="Image"]','[class*="video"]','[class*="Video"]'];let a=null;for(const r of t){const t=e.querySelector(r);if(t){a=t;break}}a||(a=e),s={targetElement:a,lastBrightness:-1},r.set(e,s)}if(Math.abs(t-s.lastBrightness)>.001){const e=`brightness(${t.toFixed(4)})`;s.targetElement.style.filter=e,s.targetElement.style.webkitFilter=e,s.targetElement.style.transition="filter 0.1s ease-out",s.lastBrightness=t}};function useBrightness(){const e=t(new Map),n=t(new Map),s=t(new Map);return{updateBrightness:r((t,r,a=!0,o="default")=>{const{minBrightness:i=.7,maxBrightness:l=1,imageSelector:c=".picture, picture, video",scrubStrength:u=.25}=r,f={minBrightness:i,maxBrightness:l};t.forEach((t,r)=>{var i;if(!t)return;const l=((e,t)=>{const{minBrightness:r,maxBrightness:n}=t,s=window.innerHeight,a=e.top+e.height,o=s/1.5;return o>a?r+Math.max(0,Math.min(1,a/o))*(n-r):n})(t.getBoundingClientRect(),f),g=`${o}-${r}`;if(e.current.set(g,l),a){const e=null!==(i=n.current.get(g))&&void 0!==i?i:l,r=d(e,l,u);n.current.set(g,r),b(t,r,s.current,c)}else n.current.set(g,l),b(t,l,s.current,c)})},[]),animateBrightness:r((t,r,a="default")=>{const{imageSelector:o=".picture, picture, video",scrubStrength:i=.25}=r;let l=!1;return t.forEach((t,r)=>{if(!t)return;const c=`${a}-${r}`,u=e.current.get(c),f=n.current.get(c);if(void 0!==u&&void 0!==f&&Math.abs(u-f)>.001){const e=d(f,u,i);n.current.set(c,e),b(t,e,s.current,o),l=!0}}),l},[]),clearBrightnessCache:r(()=>{e.current.clear(),n.current.clear(),s.current.clear()},[]),getBrightness:r((e=0,t=1,r="default")=>{const s=`${r}-${e}`,a=n.current.get(s);return void 0!==a?Math.min(a,t):t},[])}}const h=(e,t,r)=>e+(t-e)*r,m=(e,t)=>{const{parallaxStrength:r,parallaxOffset:n}=t,s=window.innerHeight+e.height,a=e.top+e.height;return(.5-Math.max(0,Math.min(1,a/s)))*r+n},y=(e,t)=>{const{scaleFrom:r,scaleTo:n}=t,s=window.innerHeight+e.height,a=e.top+e.height;return r+(n-r)*Math.max(0,Math.min(1,a/s))},v=(e,t)=>{const{minBrightness:r,maxBrightness:n}=t,s=window.innerHeight,a=e.top+e.height/2;return r+(n-r)*Math.max(0,Math.min(1,1-Math.abs(a-s/2)/(s/2)))},S=a(null);function x({children:e}){const a=useBrightness(),o=t(null),i=t(null),l=t(0),c=t(new Map),u=t(new Map),f=r((e,t,r={})=>{var n,s,a,o,i,l,c,f,g,p,d,b,h,m;const y={parallaxStrength:null!==(n=r.parallaxStrength)&&void 0!==n?n:-20,parallaxOffset:null!==(s=r.parallaxOffset)&&void 0!==s?s:0,throttleMs:null!==(a=r.throttleMs)&&void 0!==a?a:16,enabled:null===(o=r.enabled)||void 0===o||o,enableScrubbing:null===(i=r.enableScrubbing)||void 0===i||i,scrubStrength:null!==(l=r.scrubStrength)&&void 0!==l?l:.1,scaleEnabled:null!==(c=r.scaleEnabled)&&void 0!==c&&c,scaleFrom:null!==(f=r.scaleFrom)&&void 0!==f?f:1,scaleTo:null!==(g=r.scaleTo)&&void 0!==g?g:1,brightnessEnabled:null!==(p=r.brightnessEnabled)&&void 0!==p&&p,brightnessRefs:null!==(d=r.brightnessRefs)&&void 0!==d?d:null,brightnessOptions:null!==(b=r.brightnessOptions)&&void 0!==b?b:{},highPrecision:null===(h=r.highPrecision)||void 0===h||h,applyBrightness:null!==(m=r.applyBrightness)&&void 0!==m&&m},v={id:e,refs:t,options:y,targetPositions:new Map,currentPositions:new Map,targetScales:new Map,currentScales:new Map,activeIndex:0};return u.current.set(e,v),()=>{u.current.delete(e)}},[]),g=r(()=>{const e=u.current;let t=!1;e.forEach(e=>{e.options.enabled&&(Array.isArray(e.refs.current)?e.refs.current:[e.refs.current]).forEach((r,n)=>{var s,o;if(!r)return;const i=r.getBoundingClientRect(),l=m(i,{parallaxStrength:e.options.parallaxStrength,parallaxOffset:e.options.parallaxOffset}),u=e.options.scaleEnabled?y(i,{scaleFrom:e.options.scaleFrom,scaleTo:e.options.scaleTo}):1;e.targetPositions.set(n,l),e.targetScales.set(n,u);const f=null!==(s=e.currentPositions.get(n))&&void 0!==s?s:l,g=null!==(o=e.currentScales.get(n))&&void 0!==o?o:u,p=h(f,l,e.options.scrubStrength),d=h(g,u,e.options.scrubStrength);if(e.currentPositions.set(n,p),e.currentScales.set(n,d),((e,t,r,n,s=!0)=>{const a=s?.01:.05;let o=n.get(e);o||(o={lastPosition:-9999,lastScale:-1,lastBrightness:-1},n.set(e,o));const i=Math.round(100*t)/100,l=Math.round(1e3*r)/1e3,c=Math.abs(i-o.lastPosition)>a,u=Math.abs(l-o.lastScale)>.001;if(c||u){const n=[];0!==t&&n.push(`translate3d(0, ${t.toFixed(2)}%, 0)`),1!==r&&n.push(`scale(${r.toFixed(3)})`),e.style.transform=n.join(" "),e.style.willChange="transform",o.lastPosition=i,o.lastScale=l}})(r,p,d,c.current,e.options.highPrecision),e.options.brightnessEnabled||e.options.applyBrightness){const t=e.options.brightnessRefs||e.refs,r=Array.isArray(t.current)?t.current:[t.current];a.updateBrightness(r,e.options.brightnessOptions,e.options.enableScrubbing,e.id)}t=!0})}),t&&(o.current=requestAnimationFrame(g))},[a]),d=r(()=>{const e=Date.now();16>e-l.current||(l.current=e,i.current&&cancelAnimationFrame(i.current),i.current=requestAnimationFrame(()=>{o.current&&cancelAnimationFrame(o.current),o.current=requestAnimationFrame(g)}))},[g]);n(()=>(window.addEventListener("scroll",d,{passive:!0}),window.addEventListener("resize",d,{passive:!0}),d(),()=>{window.removeEventListener("scroll",d),window.removeEventListener("resize",d),o.current&&cancelAnimationFrame(o.current),i.current&&cancelAnimationFrame(i.current)}),[d]);const b=s(()=>({addInstance:f,getScrollPosition:(e,t=0)=>{var r;const n=u.current.get(e);return null!==(r=null==n?void 0:n.currentPositions.get(t))&&void 0!==r?r:0},getActiveIndex:e=>{var t;const r=u.current.get(e);return null!==(t=null==r?void 0:r.activeIndex)&&void 0!==t?t:0},getBrightness:(e=0,t=1,r)=>a.getBrightness(e,t,r),getScale:(e,t=0)=>{var r;const n=u.current.get(e);return null!==(r=null==n?void 0:n.currentScales.get(t))&&void 0!==r?r:1}}),[f,a.getBrightness]);return p.jsx(S.Provider,{value:b,children:e})}const O=()=>{const e=o(S);if(!e)throw Error("useParallaxScrollContext must be used within a ParallaxProvider");return e};let w=0;function E(e,a={}){const o=O(),i=t(null),{parallaxStrength:l=-20,parallaxOffset:c=0,throttleMs:u=2,enabled:f=!0,enableScrubbing:g=!0,scrubStrength:p=.65,scaleEnabled:d=!1,scaleFrom:b=1,scaleTo:h=1,brightnessEnabled:m=!1,brightnessRefs:y=null,brightnessOptions:v={},applyBrightness:S=!1}=a,x=function(e,t){var r={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&0>t.indexOf(n)&&(r[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var s=0;for(n=Object.getOwnPropertySymbols(e);s<n.length;s++)0>t.indexOf(n[s])&&Object.prototype.propertyIsEnumerable.call(e,n[s])&&(r[n[s]]=e[n[s]])}return r}(a,["parallaxStrength","parallaxOffset","throttleMs","enabled","enableScrubbing","scrubStrength","scaleEnabled","scaleFrom","scaleTo","brightnessEnabled","brightnessRefs","brightnessOptions","applyBrightness"]),E=m||S,P=y||e,k=s(()=>Object.assign({parallaxStrength:l,parallaxOffset:c,throttleMs:u,enabled:f,enableScrubbing:g,scrubStrength:p,scaleEnabled:d,scaleFrom:b,scaleTo:h,brightnessEnabled:E,brightnessRefs:P,brightnessOptions:v,applyBrightness:S},x),[l,c,u,f,g,p,d,b,h,E,P,v,S,x]);i.current||(i.current="parallax-"+ ++w);const B=t(null);n(()=>{if(o)return B.current=o.addInstance(i.current,e,k),()=>{B.current&&B.current()}},[o,e,k]);const M=r((e=0)=>o&&i.current?o.getScrollPosition(i.current,e):0,[o]),j=r(()=>o&&i.current?o.getActiveIndex(i.current):0,[o]),_=r((e=0)=>o?o.getBrightness(e):1,[o]),F=r((e=0)=>o&&i.current?o.getScale(i.current,e):1,[o]);return s(()=>({getScrollPosition:M,getActiveIndex:j,getBrightness:_,getScale:F,isEnabled:f,isScrubbing:g}),[M,j,_,F,f,g])}let P=0;function useParallax(e={}){var s;const a=O(),o=t(null),l=t("parallax-single-"+ ++P),[c,u]=i({ref:o,position:0,scale:1,brightness:1,activeIndex:0}),f=r(()=>{var t;if(!a||!l.current)return;const r=a.getScrollPosition(l.current,0),n=a.getScale(l.current,0),s=a.getBrightness(0,(null===(t=e.brightnessOptions)||void 0===t?void 0:t.maxBrightness)||1),i=a.getActiveIndex(l.current);u({ref:o,position:r,scale:n,brightness:s,activeIndex:i})},[a,null===(s=e.brightnessOptions)||void 0===s?void 0:s.maxBrightness]);return n(()=>{if(!a)return;const t=a.addInstance(l.current,o,e),r=setInterval(f,16);return()=>{t(),clearInterval(r)}},[a,e,f]),c}export{x as ParallaxProvider,v as calculateBrightness,m as calculateParallax,y as calculateScale,h as lerp,useBrightness,useParallax,E as useParallaxScroll,O as useParallaxScrollContext}; | ||
import e,{useRef as t,useCallback as r,useEffect as n,useMemo as s,createContext as a,useContext as i,useState as o}from"react";import{useLenis as c}from"lenis/react";var l,u,g={exports:{}},f={},b={};"production"===process.env.NODE_ENV?g.exports=function(){if(l)return f;l=1;var e=Symbol.for("react.transitional.element"),t=Symbol.for("react.fragment");function r(t,r,n){var s=null;if(void 0!==n&&(s=""+n),void 0!==r.key&&(s=""+r.key),"key"in r)for(var a in n={},r)"key"!==a&&(n[a]=r[a]);else n=r;return r=n.ref,{$$typeof:e,type:t,key:s,ref:void 0!==r?r:null,props:n}}return f.Fragment=t,f.jsx=r,f.jsxs=r,f}():g.exports=(u||(u=1,"production"!==process.env.NODE_ENV&&function(){function t(e){if(null==e)return null;if("function"==typeof e)return e.$$typeof===B?null:e.displayName||e.name||null;if("string"==typeof e)return e;switch(e){case h:return"Fragment";case d:return"Profiler";case p:return"StrictMode";case S:return"Suspense";case x:return"SuspenseList";case w:return"Activity"}if("object"==typeof e)switch(e.tag,e.$$typeof){case f:return"Portal";case y:return(e.displayName||"Context")+".Provider";case m:return(e._context.displayName||"Context")+".Consumer";case v:var r=e.render;return(e=e.displayName)||(e=""!==(e=r.displayName||r.name||"")?"ForwardRef("+e+")":"ForwardRef"),e;case O:return null!==(r=e.displayName||null)?r:t(e.type)||"Memo";case E:r=e._payload,e=e._init;try{return t(e(r))}catch(e){}}return null}function r(e){return""+e}function n(e){try{r(e);var t=!1}catch(e){t=!0}if(t){var n=(t=console).error,s="function"==typeof Symbol&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return n.call(t,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",s),r(e)}}function s(e){if(e===h)return"<>";if("object"==typeof e&&null!==e&&e.$$typeof===E)return"<...>";try{var r=t(e);return r?"<"+r+">":"<...>"}catch(e){return"<...>"}}function a(){return Error("react-stack-top-frame")}function i(){var e=t(this.type);return _[e]||(_[e]=!0),void 0!==(e=this.props.ref)?e:null}function o(e,r,s,a,o,u,f,b){var h,p=r.children;if(void 0!==p)if(a){if(M(p)){for(a=0;a<p.length;a++)c(p[a]);Object.freeze&&Object.freeze(p)}}else c(p);if(j.call(r,"key")){p=t(e);var d=Object.keys(r).filter(function(e){return"key"!==e});a=d.length>0?"{key: someKey, "+d.join(": ..., ")+": ...}":"{key: someKey}",I[p+a]||(d=d.length>0?"{"+d.join(": ..., ")+": ...}":"{}",I[p+a]=!0)}if(p=null,void 0!==s&&(n(s),p=""+s),function(e){if(j.call(e,"key")){var t=Object.getOwnPropertyDescriptor(e,"key").get;if(t&&t.isReactWarning)return!1}return void 0!==e.key}(r)&&(n(r.key),p=""+r.key),"key"in r)for(var m in s={},r)"key"!==m&&(s[m]=r[m]);else s=r;return p&&function(e){function t(){l||(l=!0)}t.isReactWarning=!0,Object.defineProperty(e,"key",{get:t,configurable:!0})}(s,"function"==typeof e&&(e.displayName||e.name)),function(e,t,r,n,s,a,o,c){return r=a.ref,Object.defineProperty(e={$$typeof:g,type:e,key:t,props:a,_owner:s},"ref",null!==(void 0!==r?r:null)?{enumerable:!1,get:i}:{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:o}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:c}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}(e,p,u,0,null===(h=P.A)?null:h.getOwner(),s,f,b)}function c(e){"object"==typeof e&&null!==e&&e.$$typeof===g&&e._store&&(e._store.validated=1)}var l,u=e,g=Symbol.for("react.transitional.element"),f=Symbol.for("react.portal"),h=Symbol.for("react.fragment"),p=Symbol.for("react.strict_mode"),d=Symbol.for("react.profiler"),m=Symbol.for("react.consumer"),y=Symbol.for("react.context"),v=Symbol.for("react.forward_ref"),S=Symbol.for("react.suspense"),x=Symbol.for("react.suspense_list"),O=Symbol.for("react.memo"),E=Symbol.for("react.lazy"),w=Symbol.for("react.activity"),B=Symbol.for("react.client.reference"),P=u.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,j=Object.prototype.hasOwnProperty,M=Array.isArray,k=console.createTask?console.createTask:function(){return null},_={},A=(u={"react-stack-bottom-frame":function(e){return e()}})["react-stack-bottom-frame"].bind(u,a)(),F=k(s(a)),I={};b.Fragment=h,b.jsx=function(e,t,r,n,a){var i=1e4>P.recentlyCreatedOwnerStacks++;return o(e,t,r,!1,0,a,i?Error("react-stack-top-frame"):A,i?k(s(e)):F)},b.jsxs=function(e,t,r,n,a){var i=1e4>P.recentlyCreatedOwnerStacks++;return o(e,t,r,!0,0,a,i?Error("react-stack-top-frame"):A,i?k(s(e)):F)}}()),b);var h=g.exports;const p=(e,t,r,n)=>{let s=r.get(e);if(!s){const t=[n,".picture","picture","img","video",'[class*="image"]','[class*="Image"]','[class*="video"]','[class*="Video"]'];let a=null;for(const r of t)if(r&&(a=e.querySelector(r),a))break;a||(a=e),s={targetElement:a,lastBrightness:-1},r.set(e,s)}if(Math.abs(t-s.lastBrightness)>.001){const e=`brightness(${t.toFixed(4)})`;s.targetElement.style.filter=e,s.targetElement.style.webkitFilter=e,s.targetElement.style.transition="filter 0.1s ease-out",s.lastBrightness=t}};function useBrightness(){const e=t(new Map),n=t(new Map),s=t(new Map);return{updateBrightness:r((t,r,a=!0,i="default")=>{const{minBrightness:o=.7,maxBrightness:c=1,imageSelector:l=".picture, picture, video"}=r,u={minBrightness:o,maxBrightness:c};t.forEach((t,r)=>{if(!t)return;const o=t;if(!o)return;const c=o.parentElement;if(!c)return;const g=((e,t)=>{const{minBrightness:r,maxBrightness:n}=t,s=window.innerHeight,a=e.top+e.height,i=s/1.5;return i>a?r+Math.max(0,Math.min(1,a/i))*(n-r):n})(c.getBoundingClientRect(),u),f=`${i}_${r}`;a?(e.current.set(f,g),n.current.has(f)||n.current.set(f,g)):p(o,g,s.current,l)})},[]),animateBrightness:r((t,r,a="default")=>{const{imageSelector:i=".picture, picture, video",scrubStrength:o=.25}=r;let c=!1;return t.forEach((t,r)=>{var l;if(!t)return;const u=t;if(!u)return;const g=`${a}_${r}`,f=e.current.get(g);if(void 0!==f){const e=null!==(l=n.current.get(g))&&void 0!==l?l:f,t=(b=e)+(f-b)*o;Math.abs(t-e)>.001?(n.current.set(g,t),p(u,t,s.current,i),c=!0):.001>Math.abs(f-e)&&(n.current.set(g,f),p(u,f,s.current,i))}var b}),c},[]),clearBrightnessCache:r(()=>{s.current.clear()},[]),getBrightness:r((e=0,t=1,r="default")=>{const s=`${r}_${e}`;return n.current.get(s)||t},[])}}const d=a(null),m=(e,t,r)=>e+(t-e)*r,y=(e,t,r,n,s=!0)=>{const a=s?.01:.05;let i=n.get(e);i||(i={lastPosition:-9999,lastScale:-1},n.set(e,i));const o=Math.round(100*t)/100,c=Math.round(1e3*r)/1e3,l=Math.abs(o-i.lastPosition)>a,u=Math.abs(c-i.lastScale)>.001;if(l||u){const n=[];0!==t&&n.push(`translate3d(0, ${t.toFixed(2)}%, 0)`),1!==r&&n.push(`scale(${r.toFixed(3)})`),e.style.transform=n.join(" "),e.style.willChange="transform",i.lastPosition=o,i.lastScale=c}};function v({children:e}){const a=c(),i=useBrightness(),o=t(null),l=t(null),u=t(0),g=t(new Map),f=t(new Map),b=r((e,t,r={})=>{const n={id:e,refs:t,options:Object.assign({parallaxStrength:-20,parallaxOffset:0,throttleMs:2,enabled:!0,enableScrubbing:!0,scrubStrength:.15,scaleEnabled:!1,scaleFrom:1,scaleTo:1,brightnessEnabled:!1,brightnessRefs:null,brightnessOptions:{},highPrecision:!0,applyBrightness:!1},r),targetPositions:new Map,currentPositions:new Map,targetScales:new Map,currentScales:new Map,activeIndex:0};return f.current.set(e,n),()=>{f.current.delete(e)}},[]),p=r(()=>{const e=Array.from(f.current.values());if(0===e.length)return;let t=!1;e.forEach(e=>{const{refs:r,options:n,targetPositions:s,currentPositions:a,targetScales:o,currentScales:c}=e;if(!n.enabled||!n.enableScrubbing)return;const l=Array.isArray(r.current)?r.current:[r.current];if(0!==l.length&&l[0]&&(l.forEach((e,r)=>{var i,l;if(!e)return;const u=e;if(!u)return;const f=s.get(r),b=o.get(r);let h=!1;if(void 0!==f){const e=null!==(i=a.get(r))&&void 0!==i?i:f,s=m(e,f,n.scrubStrength);Math.abs(s-e)>.01?(a.set(r,s),h=!0,t=!0):.01>Math.abs(f-e)?(a.set(r,f),h=!0):t=!0}if(n.scaleEnabled&&void 0!==b){const e=null!==(l=c.get(r))&&void 0!==l?l:b,s=m(e,b,n.scrubStrength);Math.abs(s-e)>.001?(c.set(r,s),h=!0,t=!0):.001>Math.abs(b-e)?(c.set(r,b),h=!0):t=!0}if(h){const e=a.get(r)||0,t=n.scaleEnabled&&c.get(r)||1;y(u,e,t,g.current,n.highPrecision)}}),n.brightnessEnabled||n.applyBrightness)){const s=n.brightnessRefs||r,a=Array.isArray(s.current)?s.current:[s.current];if(a.some(e=>e)){const r=i.animateBrightness(a,Object.assign(Object.assign({minBrightness:.3,maxBrightness:1,imageSelector:'.picture, picture, img, video, [class*="image"], [class*="Image"], [class*="video"], [class*="Video"]'},n.brightnessOptions),{scrubStrength:n.scrubStrength}),e.id);t=t||r}}}),o.current=t?requestAnimationFrame(p):null},[i]),v=r(()=>{const e=Array.from(f.current.values()).filter(e=>{var t;return e.options.enabled&&(null===(t=e.refs)||void 0===t?void 0:t.current)});if(0===e.length)return;const t=performance.now(),r=Math.min(...e.map(e=>e.options.throttleMs));if(t-u.current<r)return void(l.current||(l.current=requestAnimationFrame(()=>{l.current=null,v()})));u.current=t;const n=window.innerHeight;let s=!1;e.forEach(e=>{const{refs:t,options:r,targetPositions:a,currentPositions:o,targetScales:c,currentScales:l}=e,u=Array.isArray(t.current)?t.current:[t.current];if(0===u.length||!u[0])return;let f=0,b=1/0;if(u.forEach((e,t)=>{if(!e)return;const i=e;if(!i)return;const u=i.parentElement;if(!u)return;const h=u.getBoundingClientRect(),p=((e,t)=>{const{parallaxStrength:r}=t,n=window.innerHeight+e.height,s=e.top+e.height;return(.5-Math.max(0,Math.min(1,s/n)))*r})(h,{parallaxStrength:r.parallaxStrength}),d=r.scaleEnabled?((e,t)=>{const{scaleFrom:r,scaleTo:n}=t,s=window.innerHeight+e.height,a=e.top+e.height;return r+(n-r)*Math.max(0,Math.min(1,a/s))})(h,{scaleFrom:r.scaleFrom,scaleTo:r.scaleTo}):1;r.enableScrubbing?(a.set(t,p),o.has(t)||o.set(t,p),r.scaleEnabled&&(c.set(t,d),l.has(t)||l.set(t,d)),s=!0):y(i,p,d,g.current,r.highPrecision);const m=h.top+h.height/2,v=Math.abs(m-n/2);b>v&&(b=v,f=t)}),r.brightnessEnabled||r.applyBrightness){const n=r.brightnessRefs||t,s=Array.isArray(n.current)?n.current:[n.current];s.some(e=>e)&&i.updateBrightness(s,Object.assign({minBrightness:.3,maxBrightness:1,imageSelector:'.picture, picture, img, video, [class*="image"], [class*="Image"], [class*="video"], [class*="Video"]'},r.brightnessOptions),r.enableScrubbing,e.id)}e.activeIndex=f}),s&&null===o.current&&(o.current=requestAnimationFrame(p))},[p,i]);n(()=>{if(a)return a.on("scroll",v),v(),()=>{a.off("scroll",v),null!==o.current&&(cancelAnimationFrame(o.current),o.current=null),null!==l.current&&(cancelAnimationFrame(l.current),l.current=null),g.current.clear(),i.clearBrightnessCache()}},[a,v,i]);const S=s(()=>({addInstance:b,getScrollPosition:(e,t=0)=>{const r=f.current.get(e);return(null==r?void 0:r.currentPositions.get(t))||0},getActiveIndex:e=>{const t=f.current.get(e);return(null==t?void 0:t.activeIndex)||0},getBrightness:(e=0,t=1,r)=>i.getBrightness(e,t,r),getScale:(e,t=0)=>{const r=f.current.get(e);return(null==r?void 0:r.currentScales.get(t))||1}}),[b,i.getBrightness]);return h.jsx(d.Provider,{value:S,children:e})}const S=()=>{const e=i(d);if(!e)throw Error("useParallaxScrollContext must be used within a ParallaxProvider");return e};let x=0;function O(e,a={}){const i=S(),o=t(null),{parallaxStrength:c=-20,parallaxOffset:l=0,throttleMs:u=2,enabled:g=!0,enableScrubbing:f=!0,scrubStrength:b=.65,scaleEnabled:h=!1,scaleFrom:p=1,scaleTo:d=1,brightnessEnabled:m=!1,brightnessRefs:y=null,brightnessOptions:v={},applyBrightness:O=!1}=a,E=function(e,t){var r={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&0>t.indexOf(n)&&(r[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var s=0;for(n=Object.getOwnPropertySymbols(e);s<n.length;s++)0>t.indexOf(n[s])&&Object.prototype.propertyIsEnumerable.call(e,n[s])&&(r[n[s]]=e[n[s]])}return r}(a,["parallaxStrength","parallaxOffset","throttleMs","enabled","enableScrubbing","scrubStrength","scaleEnabled","scaleFrom","scaleTo","brightnessEnabled","brightnessRefs","brightnessOptions","applyBrightness"]),w=m||O,B=y||e,P=s(()=>Object.assign({parallaxStrength:c,parallaxOffset:l,throttleMs:u,enabled:g,enableScrubbing:f,scrubStrength:b,scaleEnabled:h,scaleFrom:p,scaleTo:d,brightnessEnabled:w,brightnessRefs:B,brightnessOptions:v,applyBrightness:O},E),[c,l,u,g,f,b,h,p,d,w,B,v,O,E]);o.current||(o.current="parallax-"+ ++x);const j=t(null);n(()=>{if(i)return j.current=i.addInstance(o.current,e,P),()=>{j.current&&j.current()}},[i,e,P]);const M=r((e=0)=>i&&o.current?i.getScrollPosition(o.current,e):0,[i]),k=r(()=>i&&o.current?i.getActiveIndex(o.current):0,[i]),_=r((e=0)=>i?i.getBrightness(e):1,[i]),A=r((e=0)=>i&&o.current?i.getScale(o.current,e):1,[i]);return s(()=>({getScrollPosition:M,getActiveIndex:k,getBrightness:_,getScale:A,isEnabled:g,isScrubbing:f}),[M,k,_,A,g,f])}let E=0;function useParallax(e={}){var s;const a=S(),i=t(null),c=t(null),[l,u]=o({position:0,scale:1,brightness:1,activeIndex:0}),g=r(()=>{var t;if(!a||!c.current)return;const r=a.getScrollPosition(c.current,0),n=a.getScale(c.current,0),s=a.getBrightness(0,(null===(t=e.brightnessOptions)||void 0===t?void 0:t.maxBrightness)||1),i=a.getActiveIndex(c.current);u({position:r,scale:n,brightness:s,activeIndex:i})},[a,null===(s=e.brightnessOptions)||void 0===s?void 0:s.maxBrightness]);return n(()=>{if(!a)return;c.current||(c.current="parallax-single-"+ ++E);const t=a.addInstance(c.current,i,e),r=setInterval(g,16);return()=>{t(),clearInterval(r)}},[a,e,g]),[i,l]}export{v as ParallaxProvider,useBrightness,useParallax,O as useParallaxScroll,S as useParallaxScrollContext}; |
@@ -1,2 +0,7 @@ | ||
import type { ParallaxOptions, UseParallaxReturn } from './utils/types'; | ||
export default function useParallax(options?: ParallaxOptions): UseParallaxReturn; | ||
import type { ParallaxOptions } from './utils/types'; | ||
export default function useParallax<T extends HTMLElement = HTMLElement>(options?: ParallaxOptions): [React.RefObject<T | null>, { | ||
position: number; | ||
scale: number; | ||
brightness: number; | ||
activeIndex: number; | ||
}]; |
@@ -55,3 +55,2 @@ import React from 'react'; | ||
lastScale: number; | ||
lastBrightness: number; | ||
} | ||
@@ -58,0 +57,0 @@ export interface BrightnessElementCache { |
{ | ||
"name": "dash-parallax-scroll", | ||
"version": "1.0.15", | ||
"version": "1.0.16", | ||
"description": "A high-performance React parallax library with brightness control and smooth animations", | ||
@@ -44,3 +44,4 @@ "main": "dist/index.cjs", | ||
"peerDependencies": { | ||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" | ||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", | ||
"lenis": "^1.0.0" | ||
}, | ||
@@ -47,0 +48,0 @@ "devDependencies": { |
Sorry, the diff of this file is not supported yet
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
33503
2.14%38
72.73%0
-100%2
100%9
-10%210
-2.78%