Releases: jscottsmith/react-scroll-parallax
v2.3.3
Changes
- Fix typing for ParallaxBanner prop #77 – thanks to @fbarrailla for #92
v2.3.0
v2.0.0
Changes
- #76 Export context for hooks support via
useController- @zalishchuk
v2.1.0
v2.0.6
v2.0.0
Breaking changes
- Replaces all the
offsetprops and removes theslowerScrollRateprop in favor of x/y props that take arrays for start/end values - Updated the way progress is calculated
- Support for the latest React version
New Features
- Added support for horizontal scrolling
- Support parallax scrolling effects in a div with scroll overflow
Breaking changes
Replaces all the offset props and removes the slowerScrollRate prop in favor of x/y props that take arrays for start/end values
This:
<Parallax offsetYMin={-100} offsetYMax={100} slowerScrollRate={false}>becomes this (values flipped):
<Parallax y={[100, -100]}>And this:
<Parallax offsetYMin={-100} offsetYMax={100} slowerScrollRate={true}>becomes this (starts at -100%, ends at 100%):
<Parallax y={[-100, 100]}>Why?
The way the min/max offsets worked was confusing and limiting:
Updated the way progress is calculated
Progress is now calculated from the original elements position in the viewport. So the top of the element at the bottom of the window is 0, the bottom of the element at the top of the window is 1. If you are upgrading from v1 some elements may appear to move further/faster than they did before so you might need to adjust the x/y offsets.
These changes address this issue:
Which now allows for this:
Support for the latest React version
Removes usage of some deprecated lifestyle hooks and uses the latest context api. Requires [email protected] or greater.
New Features
Added support for horizontal scrolling
Horizontal scrolling is now working. Just tell the provider the axis:
<ParallaxProvider scrollAxis="horizontal" />Example:
Support parallax scrolling effects in a div with scroll overflow
Give the provider a reference to the DOM element which will be scrollable and contain parallax elements.
const domElement = document.getElementById('my-scrolling-div');
<ParallaxProvider scrollContainer={domElement} />;Example:
v1.3.5
v1.3.4
v1.3.3
Changes
- Add Issue Template