react-scroll-parallax
Advanced tools
Comparing version 3.0.0-alpha.3 to 3.0.0-alpha.4
@@ -0,1 +1,2 @@ | ||
import { ValidEasingPresets } from 'parallax-controller'; | ||
export interface ParallaxProps { | ||
@@ -133,2 +134,9 @@ /** | ||
/** | ||
* Easing preset or custom params for a cubic bezier easing function. | ||
* | ||
* Example preset: 'easeInOut' | ||
* Example params: [0.42, 0, 0.58, 1] | ||
*/ | ||
easing?: number[] | ValidEasingPresets; | ||
/** | ||
* Optionally pass additional class names to be added to the outermost parallax element. | ||
@@ -135,0 +143,0 @@ */ |
@@ -77,3 +77,4 @@ 'use strict'; | ||
scaleZ: props.scaleZ, | ||
opacity: props.opacity | ||
opacity: props.opacity, | ||
easing: props.easing | ||
}) | ||
@@ -104,3 +105,3 @@ }; | ||
} | ||
}, [props.disabled, props.translateX, props.translateY, props.rotate, props.rotateX, props.rotateY, props.rotateZ, props.scale, props.scaleX, props.scaleY, props.scaleZ, props.speed, props.opacity]); | ||
}, [props.disabled, props.translateX, props.translateY, props.rotate, props.rotateX, props.rotateY, props.rotateZ, props.scale, props.scaleX, props.scaleY, props.scaleZ, props.speed, props.opacity, props.easing]); | ||
var Outer = props.tagOuter; | ||
@@ -107,0 +108,0 @@ var Inner = props.tagInner; |
@@ -1,2 +0,2 @@ | ||
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("react"),r=(e=t)&&"object"==typeof e&&"default"in e?e.default:e,a=require("parallax-controller"),l=r.createContext(null);function o(){var e=t.useContext(l);if(!e)throw new Error("Could not find `react-scroll-parallax` context value. Please ensure the component is wrapped in a <ParallaxProvider>");return e}function n(e){var l=o(),n=t.useRef(),s=t.useRef();function c(){var t,r=void 0!==e.speed,a=e.translateX,o=e.translateY;return r&&"horizontal"==l.scrollAxis&&(a=[10*(e.speed||0)+"px",-10*(e.speed||0)+"px"]),r&&"vertical"==l.scrollAxis&&(o=[10*(e.speed||0)+"px",-10*(e.speed||0)+"px"]),{elInner:n.current,elOuter:s.current,props:(t={disabled:e.disabled,translateX:a,translateY:o,rotate:e.rotate,rotateX:e.rotateX,rotateY:e.rotateY,rotateZ:e.rotateZ,scale:e.scale,scaleX:e.scaleX,scaleY:e.scaleY,scaleZ:e.scaleZ,opacity:e.opacity},Object.keys(t).forEach((function(e){return void 0===t[e]?delete t[e]:{}})),t)}}!function(e){t.useEffect((function(){if(!(e||e instanceof a.ParallaxController))throw new Error("Must wrap your application's <Parallax /> components in a <ParallaxProvider />.")}),[e])}(l);var i=t.useState(),u=i[0],p=i[1];return t.useEffect((function(){var e=l.createElement(c());return p(e),function(){return l.removeElementById(e.id)}}),[]),t.useEffect((function(){u&&(e.disabled?l.resetElementStyles(u):l.updateElementPropsById(u.id,c().props))}),[e.disabled,e.translateX,e.translateY,e.rotate,e.rotateX,e.rotateY,e.rotateZ,e.scale,e.scaleX,e.scaleY,e.scaleZ,e.speed,e.opacity]),r.createElement(e.tagOuter,{className:"parallax-outer"+(e.className?" "+e.className:""),ref:s,style:e.styleOuter},r.createElement(e.tagInner,{className:"parallax-inner",ref:n,style:e.styleInner},e.children))}function s(){return(s=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var a in r)Object.prototype.hasOwnProperty.call(r,a)&&(e[a]=r[a])}return e}).apply(this,arguments)}function c(e,t){return(c=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}n.defaultProps={disabled:!1,tagInner:"div",tagOuter:"div"};var i={position:"relative",overflow:"hidden",width:"100%",height:"50vh"},u={position:"absolute",top:0,right:0,bottom:0,left:0},p=function(e){var t=e.children,a=e.className,l=e.layers,o=e.disabled;return r.createElement("div",{style:s({},i,e.style),className:"parallax-banner"+(a?" "+a:"")},l.map((function(e,t){var a=e.amount,l=e.children,c=e.expanded,i=void 0===c||c,p=e.image,d=e.props,f=void 0===d?{}:d,v=f.style||{},x=f.className||"";delete f.style,delete f.className;var y="parallax-banner-layer-"+t+(x?" "+x:""),m=i?{top:100*Math.abs(a)*-1+"%",bottom:100*Math.abs(a)*-1+"%"}:{};return r.createElement(n,{key:"layer-"+t,translateY:[-1*a*100+"%",100*a+"%"],styleInner:u,styleOuter:u,disabled:o},r.createElement("div",Object.assign({className:y,style:s({},p?{backgroundImage:"url("+p+")",backgroundPosition:"center",backgroundSize:"cover"}:{},u,m,v)},f),l))})),t)};p.defaultProps={disabled:!1};var d=function(e){var t,o;function n(t){var r;return(r=e.call(this,t)||this).controller="undefined"==typeof window?null:a.ParallaxController.init({scrollAxis:t.scrollAxis,scrollContainer:t.scrollContainer}),r}o=e,(t=n).prototype=Object.create(o.prototype),t.prototype.constructor=t,c(t,o);var s=n.prototype;return s.componentDidUpdate=function(e){e.scrollContainer!==this.props.scrollContainer&&this.controller.updateScrollContainer(this.props.scrollContainer)},s.componentWillUnmount=function(){this.controller=this.controller.destroy()},s.render=function(){return r.createElement(l.Provider,{value:this.controller},this.props.children)},n}(t.Component);d.defaultProps={scrollAxis:a.ScrollAxis.vertical},exports.Parallax=n,exports.ParallaxBanner=p,exports.ParallaxContext=l,exports.ParallaxProvider=d,exports.useController=o; | ||
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("react"),r=(e=t)&&"object"==typeof e&&"default"in e?e.default:e,a=require("parallax-controller"),l=r.createContext(null);function n(){var e=t.useContext(l);if(!e)throw new Error("Could not find `react-scroll-parallax` context value. Please ensure the component is wrapped in a <ParallaxProvider>");return e}function o(e){var l=n(),o=t.useRef(),s=t.useRef();function i(){var t,r=void 0!==e.speed,a=e.translateX,n=e.translateY;return r&&"horizontal"==l.scrollAxis&&(a=[10*(e.speed||0)+"px",-10*(e.speed||0)+"px"]),r&&"vertical"==l.scrollAxis&&(n=[10*(e.speed||0)+"px",-10*(e.speed||0)+"px"]),{elInner:o.current,elOuter:s.current,props:(t={disabled:e.disabled,translateX:a,translateY:n,rotate:e.rotate,rotateX:e.rotateX,rotateY:e.rotateY,rotateZ:e.rotateZ,scale:e.scale,scaleX:e.scaleX,scaleY:e.scaleY,scaleZ:e.scaleZ,opacity:e.opacity,easing:e.easing},Object.keys(t).forEach((function(e){return void 0===t[e]?delete t[e]:{}})),t)}}!function(e){t.useEffect((function(){if(!(e||e instanceof a.ParallaxController))throw new Error("Must wrap your application's <Parallax /> components in a <ParallaxProvider />.")}),[e])}(l);var c=t.useState(),u=c[0],p=c[1];return t.useEffect((function(){var e=l.createElement(i());return p(e),function(){return l.removeElementById(e.id)}}),[]),t.useEffect((function(){u&&(e.disabled?l.resetElementStyles(u):l.updateElementPropsById(u.id,i().props))}),[e.disabled,e.translateX,e.translateY,e.rotate,e.rotateX,e.rotateY,e.rotateZ,e.scale,e.scaleX,e.scaleY,e.scaleZ,e.speed,e.opacity,e.easing]),r.createElement(e.tagOuter,{className:"parallax-outer"+(e.className?" "+e.className:""),ref:s,style:e.styleOuter},r.createElement(e.tagInner,{className:"parallax-inner",ref:o,style:e.styleInner},e.children))}function s(){return(s=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var a in r)Object.prototype.hasOwnProperty.call(r,a)&&(e[a]=r[a])}return e}).apply(this,arguments)}function i(e,t){return(i=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}o.defaultProps={disabled:!1,tagInner:"div",tagOuter:"div"};var c={position:"relative",overflow:"hidden",width:"100%",height:"50vh"},u={position:"absolute",top:0,right:0,bottom:0,left:0},p=function(e){var t=e.children,a=e.className,l=e.layers,n=e.disabled;return r.createElement("div",{style:s({},c,e.style),className:"parallax-banner"+(a?" "+a:"")},l.map((function(e,t){var a=e.amount,l=e.children,i=e.expanded,c=void 0===i||i,p=e.image,d=e.props,f=void 0===d?{}:d,v=f.style||{},x=f.className||"";delete f.style,delete f.className;var y="parallax-banner-layer-"+t+(x?" "+x:""),m=c?{top:100*Math.abs(a)*-1+"%",bottom:100*Math.abs(a)*-1+"%"}:{};return r.createElement(o,{key:"layer-"+t,translateY:[-1*a*100+"%",100*a+"%"],styleInner:u,styleOuter:u,disabled:n},r.createElement("div",Object.assign({className:y,style:s({},p?{backgroundImage:"url("+p+")",backgroundPosition:"center",backgroundSize:"cover"}:{},u,m,v)},f),l))})),t)};p.defaultProps={disabled:!1};var d=function(e){var t,n;function o(t){var r;return(r=e.call(this,t)||this).controller="undefined"==typeof window?null:a.ParallaxController.init({scrollAxis:t.scrollAxis,scrollContainer:t.scrollContainer}),r}n=e,(t=o).prototype=Object.create(n.prototype),t.prototype.constructor=t,i(t,n);var s=o.prototype;return s.componentDidUpdate=function(e){e.scrollContainer!==this.props.scrollContainer&&this.controller.updateScrollContainer(this.props.scrollContainer)},s.componentWillUnmount=function(){this.controller=this.controller.destroy()},s.render=function(){return r.createElement(l.Provider,{value:this.controller},this.props.children)},o}(t.Component);d.defaultProps={scrollAxis:a.ScrollAxis.vertical},exports.Parallax=o,exports.ParallaxBanner=p,exports.ParallaxContext=l,exports.ParallaxProvider=d,exports.useController=n; | ||
//# sourceMappingURL=react-scroll-parallax.cjs.production.min.js.map |
@@ -70,3 +70,4 @@ import React, { useContext, useEffect, useRef, useState, Component } from 'react'; | ||
scaleZ: props.scaleZ, | ||
opacity: props.opacity | ||
opacity: props.opacity, | ||
easing: props.easing | ||
}) | ||
@@ -97,3 +98,3 @@ }; | ||
} | ||
}, [props.disabled, props.translateX, props.translateY, props.rotate, props.rotateX, props.rotateY, props.rotateZ, props.scale, props.scaleX, props.scaleY, props.scaleZ, props.speed, props.opacity]); | ||
}, [props.disabled, props.translateX, props.translateY, props.rotate, props.rotateX, props.rotateY, props.rotateZ, props.scale, props.scaleX, props.scaleY, props.scaleZ, props.speed, props.opacity, props.easing]); | ||
var Outer = props.tagOuter; | ||
@@ -100,0 +101,0 @@ var Inner = props.tagInner; |
{ | ||
"name": "react-scroll-parallax", | ||
"version": "3.0.0-alpha.3", | ||
"version": "3.0.0-alpha.4", | ||
"description": "React components to create parallax scroll effects for banners, images or any other DOM elements.", | ||
@@ -77,3 +77,3 @@ "repository": { | ||
"dependencies": { | ||
"parallax-controller": "0.1.14" | ||
"parallax-controller": "0.1.17" | ||
}, | ||
@@ -80,0 +80,0 @@ "devDependencies": { |
@@ -0,1 +1,3 @@ | ||
import { ValidEasingPresets } from 'parallax-controller'; | ||
export interface ParallaxProps { | ||
@@ -135,2 +137,9 @@ /** | ||
/** | ||
* Easing preset or custom params for a cubic bezier easing function. | ||
* | ||
* Example preset: 'easeInOut' | ||
* Example params: [0.42, 0, 0.58, 1] | ||
*/ | ||
easing?: number[] | ValidEasingPresets; | ||
/** | ||
* Optionally pass additional class names to be added to the outermost parallax element. | ||
@@ -137,0 +146,0 @@ */ |
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
Sorry, the diff of this file is not supported yet
123958
1837
+ Addedbezier-easing@2.1.0(transitive)
+ Addedparallax-controller@0.1.17(transitive)
- Removedparallax-controller@0.1.14(transitive)
Updatedparallax-controller@0.1.17