yarn add @react-spring/parallax
NOTE: Currently, only @react-spring/web
is supported.
Parallax
creates a scrollable container. ParallaxLayer
s contain your content and will be moved according to their offsets and speeds.
import { Parallax, ParallaxLayer } from '@react-spring/parallax'
const Example = () => {
const ref = useRef()
return (
<Parallax pages={3} ref={ref}>
<ParallaxLayer offset={0} speed={2.5}>
<p>Layers can contain anything</p>
</ParallaxLayer>
<ParallaxLayer offset={1} speed={-2} factor={1.5} horizontal />
<ParallaxLayer sticky={{ start: 1, end: 2 }} />
<ParallaxLayer offset={2} speed={1}>
<button onClick={() => ref.current.scrollTo(0)}>Scroll to top</button>
</ParallaxLayer>
</Parallax>
)
}
Property | Type | Description |
---|---|---|
pages | number | Total space of the container. Each page takes up 100% of the viewport. |
config? | SpringConfig | The spring behavior. Defaults to config.slow (see configs). |
enabled? | boolean | Whether or not the content can be scrolled. Defaults to true . |
horizontal? | boolean | Whether or not the container scrolls horizontally. Defaults to false . |
innerStyle? | CSSProperties | CSS object to style the inner Parallax wrapper (not the scrollable container) |
Parallax
also has a few useful properties that you can access using a ref
:
const ref = useRef()
...
<Parallax ref={ref}>
A function for click-to-scroll. It takes one paramater: the number of the page to scroll to. Pages are zero-indexed, so scrollTo(0)
will scroll to the first page, scrollTo(1)
to the second, etc.
The ref
for the outer container div
of Parallax
, for when you need access to the actual DOM Element.
NOTE: since it is also a ref
, it must be accessed with ref.current.container.current
.
The ref
for the inner container div
of Parallax
.
- All direct
children
ofParallax
must beParallaxLayer
s (orfragment
s whose only directchildren
areParallaxLayer
s). -
Parallax
is a scrollable container so all scroll events are fired from the container itself -- listening for scroll onwindow
won't work (but you can useref.current.container
).
Property | Type | Description |
---|---|---|
factor? | number | Size of the layer relative to page size (eg: 1 => 100%, 1.5 => 150%, etc). Defaults to 1 . |
offset? | number | The offset of the layer when it's corresponding page is fully in view (eg: 0 => top of 1st page, 1 => top of 2nd page, etc ). Defaults to 0 . |
speed? | number | Rate at which the layer moves in relation to scroll. Can be positive or negative. Defaults to 0 . |
horizontal? | boolean | Whether or not the layer moves horizontally. Defaults to the horizontal value of Parallax (whose default is false ). |
sticky? | StickyConfig | If set, the layer will be 'sticky' between the two offsets. All other props are ignored. Default: {start?: number = 0, end?: number = start + 1}
|
- The
offset
prop is where the layer will end up, not where it begins. For example, if a layer has an offset of1.5
, it will be halfway down the second page (zero-indexed) when the second page completely fills the viewport. - The
speed
prop will affect the initial starting position of a layer, but not it's finaloffset
position. - Any layer with
sticky
set will have az-index
higher than regular layers. This can be changed manually.