diff --git a/README.md b/README.md index ffd724207..8e96fddd8 100644 --- a/README.md +++ b/README.md @@ -26,6 +26,14 @@ or yarn yarn add react-scroll-parallax ``` +## Test the Latest Version + +A new `beta` version is in the works that offers a simpler setup but more flexibility for advanced scroll effects. You can find more information here or leave feedback: [V3 Issue](https://github.com/jscottsmith/react-scroll-parallax/issues/123). + +``` +yarn add react-scroll-parallax@beta +``` + ## Overview - [Usage](#usage) @@ -86,16 +94,16 @@ The main component for manipulating a DOM element's position based on it's posit The following are all props that can be passed to the `` component: -| Name | Type | Default | Description | -| -------------- | :-----------------------------: | :------- | ------------------------------------------------------------------------------------------------------------------ | -| **x** | `Array` of `String` or `Number` | `[0, 0]` | Offsets on x-axis in `%` or `px`. If no unit is passed percent is assumed. Percent is based on the elements width. | -| **y** | `Array` of `String` or `Number` | `[0, 0]` | Offsets on y-axis in `%` or `px`. If no unit is passed percent is assumed. Percent is based on the elements width. | -| **className** | `String` | | Optionally pass additional class names to be added to the outermost parallax element. | -| **disabled** | `Boolean` | `false` | Disables parallax effects on individual elements when `true`. | -| **styleInner** | `Object` | | Optionally pass a style object to be added to the innermost parallax element. | -| **styleOuter** | `Object` | | Optionally pass a style object to be added to the outermost parallax element. | -| **tagInner** | `String` | `div` | Optionally pass an element tag name to be applied to the innermost parallax element. | -| **tagOuter** | `String` | `div` | Optionally pass an element tag name to be applied to the outermost parallax element. | +| Name | Type | Default | Description | +| -------------- | :-----------------------------: | :------- | ------------------------------------------------------------------------------------------------------------------------------------ | +| **x** | `Array` of `String` or `Number` | `[0, 0]` | Initial and final offsets on x-axis in `%` or `px`. If no unit is passed percent is assumed. Percent is based on the elements width. | +| **y** | `Array` of `String` or `Number` | `[0, 0]` | Initial and final offsets on y-axis in `%` or `px`. If no unit is passed percent is assumed. Percent is based on the elements width. | +| **className** | `String` | | Optionally pass additional class names to be added to the outermost parallax element. | +| **disabled** | `Boolean` | `false` | Disables parallax effects on individual elements when `true`. | +| **styleInner** | `Object` | | Optionally pass a style object to be added to the innermost parallax element. | +| **styleOuter** | `Object` | | Optionally pass a style object to be added to the outermost parallax element. | +| **tagInner** | `String` | `div` | Optionally pass an element tag name to be applied to the innermost parallax element. | +| **tagOuter** | `String` | `div` | Optionally pass an element tag name to be applied to the outermost parallax element. | ## \ diff --git a/package.json b/package.json index c51355399..291fbf0a2 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-scroll-parallax", - "version": "2.4.0", + "version": "2.4.3", "description": "React components to create parallax scroll effects for banners, images or any other DOM elements.", "repository": { "type": "git", diff --git a/src/classes/ParallaxController.js b/src/classes/ParallaxController.js index 0e7dce8bf..590d0c33c 100644 --- a/src/classes/ParallaxController.js +++ b/src/classes/ParallaxController.js @@ -197,6 +197,10 @@ function ParallaxController({ scrollAxis = VERTICAL, scrollContainer }) { * Updates all parallax element attributes and positions. */ this.update = function() { + const nx = hasScrollContainer ? viewEl.scrollLeft : window.pageXOffset; + const ny = hasScrollContainer ? viewEl.scrollTop : window.pageYOffset; + scroll.setScroll(nx, ny); + _setViewSize(); _updateAllElements({ updateCache: true }); }; diff --git a/src/components/useController.js b/src/components/useController.js index 53c47dcf5..c02788797 100644 --- a/src/components/useController.js +++ b/src/components/useController.js @@ -3,6 +3,10 @@ import ParallaxContext from '../helpers/ParallaxContext'; export default () => { const parallaxController = useContext(ParallaxContext); + const isServer = typeof window === 'undefined'; + if (isServer) { + return null; + } if (!parallaxController) { throw new Error(

AltStyle によって変換されたページ (->オリジナル) /