import { formatFrontmatterToRemixMeta } from '../helpers/meta'

export const meta = formatFrontmatterToRemixMeta(frontmatter)

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

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

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

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!

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

<ExampleGrid sandboxTitles={[ 'Horizontal Parallax', 'Sticky Parallax', 'Vertical Parallax', ]} />