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

jsx

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

import { TablesConfiguration } from '../components/Tables/TablesConfig' import { PARALLAX_CONFIG_DATA } from '../data/fixtures'

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

Ref

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

tsx

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!

import { ExampleGrid } from '../components/Grids/ExampleGrid'