`<Parallax>`

This component allows you to create Parallax effects. It supports React Universal Interface.

Usage

The below example will slow down the scrolling of your <img> element.

import {Parallax} from 'libreact/lib/Parallax';

<Parallax>{({value}) =>
  <img style={{marginTop: value * 300}} src={/* ... */} />
}</Parallax>

distance — optional, number, maximum distance for parallax effect to take effect, if omitted, parallax effect will continue thoughout the length of your element, if set, the length of the parallax effect will be capped at distance, defaults to Infinity.
throttle — optional, number in milliseconds, used to throttle document scroll event, defaults to 50.
margin — optional, a 4-tuple [top, right, bottom, left] margins in pixels to apply to the viewport.
onChange — optional, callback, triggered every time the state of <Parallax> component changes. Receives the state of the <Parallax> component as a single argument.

Provides render prop with the following data object.

{
  distance: number,
  travelled: number,
  value: number,
  el: [number, number, number, number],
  root: [number, number, number, number],
}

Where el and root are rectangle bounds containing the children of the component and the window viewport, respectively.