Parallax

Used in collaboration with Parallax 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.

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
horizontalboolean
factornumber1
offsetnumber0
speednumber0
stickyStickyConfig

Ref

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

interface IParallaxLayer {
horizontal: boolean
sticky: StickyConfig
isSticky: boolean
setHeight(height: number, immediate?: boolean): void
setPosition(height: number, scrollTop: number, immediate?: boolean): void
}
type StickyConfig = { start?: number; end?: number } | undefined

Examples

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