Package Exports

@react-spring/parallax

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@react-spring/parallax) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@react-spring/parallax

This package exports the Parallax and ParallaxLayer components. Both are wrapped with React.memo.

Parallax creates a scroll container. Throw in any amount of ParallaxLayers and it will take care of moving them in accordance to their offsets and speeds.

Note: Currently, only @react-spring/web is supported.

import { Parallax, ParallaxLayer } from '@react-spring/parallax'

const Example = () => {
  const ref = useRef<Parallax>()
  return (
    <Parallax ref={ref} pages={3} scrolling={false} horizontal>
      <ParallaxLayer offset={0} speed={0.5}>
        <span
          onClick={() => {
            ref.current.scrollTo(1)
          }}>
          Layers can contain anything
        </span>
      </ParallaxLayer>
    </Parallax>
  )
}

`Parallax` props

pages: number

Determines the total space of the inner content where each page takes 100% of the visible container.
config?: SpringConfig

The spring behavior.

Defaults to config.slow.
scrolling?: boolean

Allow content to be scrolled or not.

Defaults to true.
`horizontal?: boolean

When true, content scrolls from left to right.

Defaults to false.

`ParallaxLayer` props

factor?: number

The page size (eg: 1 => 100%, 1.5 => 150%, etc)

Defaults to 1.
offset?: number

The page offset (eg: 0 => top of 1st page, 1 => top of 2nd page, etc)

Defaults to 0.
speed?: number

Shift the layer in accordance to its offset. Values can be positive or negative.

Defaults to 0.

Credits

Paul Henschel