PARALLAX
P
A
R
A
L
L
A
X
How it works
As the element scrolls past the viewport a css translate effect is applied based on the original element's position relative to the viewport. Using the speed will automatically apply a translateY css style (or translateX if the scroll axis is horizontal).
<Parallax speed={-10}>
<Parallax speed={10}>Slower
Faster
Progress is relative to the view
All effects are applied based on the original element's progress. Progress begins as the elements top edge enters the bottom of the view. It ends as the bottom of the element leaves the top of the view.
<Parallax
onProgressChange={progress => setProgress(progress)}
onEnter={() => setEntered(true)}
onExit={() => setEntered(false)}
>Parallax Element
Top entered:
false
Progress
0.000
Bottom exited:
true
Beyond Parallax: CSS effects
Additional CSS effects, like opacity, scale and rotation can be applied based on progress, even with some easing.
<Parallax
translateX={["-400px", "0px"]}
scale={[0.75, 1]}
rotate={[-180, 0]}
easing="easeInQuad"
>Heyo!