Parallax

Used in collaboration with ParallaxLayer to create visual displacements declaratively and simply.

Usage

Note

This component is only available in the @react-spring/web package and is therefore only usable in the browser.

The Parallax component creates a scrollable container in which ParallaxLayers can be placed or React.Fragments whose only direct children are ParallaxLayers. Because Parallax is a scrollable container all scroll events are fired from the container itself therefore, listening for scroll on window won't work. However, if you want to attach additional events you can use ref.current.container

import { Parallax, ParallaxLayer } from '@react-spring/parallax'
function MyComponent() {
return (
<Parallax pages={1} style={{ top: '0', left: '0' }}>
<ParallaxLayer offset={0} speed={2.5}>
<p>Parallax</p>
</ParallaxLayer>
</Parallax>
)
}

Reference

All props that can be passed to HTMLDivElement can be passed to Parallax.

PropTypeDefault
pagesnumber
configobject | functionobject
enabledbooleantrue
horizontalbooleanfalse
innerStyleCSSProperties

Ref

Passing a ref to the Parallax component will give you access to the internal state of the Parallax component via ref.current:

interface IParallax {
config: ConfigProp
horizontal: boolean
busy: boolean
space: number
offset: number
current: number
controller: Controller<{ scroll: number }>
layers: Set<IParallaxLayer>
container: React.MutableRefObject<any>
content: React.MutableRefObject<any>
scrollTo(offset: number): void
update(): void
stop(): void
}

Examples

Can't find what you're looking for? Check out all our examples!