From 019481567d314b07a34f62c9074fb583e1dcea92 Mon Sep 17 00:00:00 2001 From: Bruno Prieto Reis Date: Tue, 23 Nov 2021 23:46:28 -0300 Subject: [PATCH 1/7] Update README.md (#120) --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index ffd724207..24eb1c965 100644 --- a/README.md +++ b/README.md @@ -88,8 +88,8 @@ 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. | +| **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. | From 9113a0421be82965be20f8c12acf50bf5eb5176d Mon Sep 17 00:00:00 2001 From: J Scott Smith Date: Thu, 16 Dec 2021 10:57:37 -0800 Subject: [PATCH 2/7] set current scroll on updates #79 #65 --- src/classes/ParallaxController.js | 4 ++++ 1 file changed, 4 insertions(+) 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 }); }; From 23bc17e90a27533091e73315719671111c316ffa Mon Sep 17 00:00:00 2001 From: J Scott Smith Date: Thu, 16 Dec 2021 10:59:49 -0800 Subject: [PATCH 3/7] 2.4.1 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index c51355399..309aaf1db 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-scroll-parallax", - "version": "2.4.0", + "version": "2.4.1", "description": "React components to create parallax scroll effects for banners, images or any other DOM elements.", "repository": { "type": "git", From 60efc1532366b98020c35151bb57c8af7557e71c Mon Sep 17 00:00:00 2001 From: J Scott Smith Date: Tue, 21 Dec 2021 09:17:11 -0800 Subject: [PATCH 4/7] =?UTF-8?q?don=E2=80=99t=20throw=20on=20server=20in=20?= =?UTF-8?q?useController=20#125?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/useController.js | 4 ++++ 1 file changed, 4 insertions(+) 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( From be68c367d7da07be784ac0ce97b7ea8145004739 Mon Sep 17 00:00:00 2001 From: J Scott Smith Date: Tue, 21 Dec 2021 09:18:44 -0800 Subject: [PATCH 5/7] 2.4.2 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 309aaf1db..7d56349dd 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-scroll-parallax", - "version": "2.4.1", + "version": "2.4.2", "description": "React components to create parallax scroll effects for banners, images or any other DOM elements.", "repository": { "type": "git", From 5d885fb9c9b21eae633bc99ae828018c9b6a7d3b Mon Sep 17 00:00:00 2001 From: J Scott Smith Date: Wed, 5 Jan 2022 22:31:04 -0800 Subject: [PATCH 6/7] update readme to include beta version --- README.md | 24 ++++++++++++++++-------- 1 file changed, 16 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index 24eb1c965..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 | -| -------------- | :-----------------------------: | :------- | ------------------------------------------------------------------------------------------------------------------ | +| 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. | +| **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. | ## \ From aa32abe6c161c453acc24d98b7ef8e84cb1dbb2f Mon Sep 17 00:00:00 2001 From: J Scott Smith Date: Wed, 5 Jan 2022 22:32:56 -0800 Subject: [PATCH 7/7] 2.4.3 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 7d56349dd..291fbf0a2 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-scroll-parallax", - "version": "2.4.2", + "version": "2.4.3", "description": "React components to create parallax scroll effects for banners, images or any other DOM elements.", "repository": { "type": "git",