react-rellax

Live Demo

React Parallax component using Rellax.js.

Installation

npm i --save react-rellax

Notes

• All props are optional.
• It's common to tweak speed and percentage to suit your design requirements.
• All other props not mentioned below (e.g. className, style, etc.) are passed down as usual.

Props

• as (str) : Tag to use as a wrapper. Default: div
• centered (bool) : Centers the component on the viewport
• horizontal (bool) : Horizontal scrolling
• onMove (func) : Callback function which accepts an object {x: int, y: int}
• percentage (num) : Initial scroll percentage
• speed (int) : Integer >= -10 && <=10 determines scroll speed. Default: -2
• zIndex (int) : Orders component on the z-axis
• wrapper (str) : Selector to use as a wrapper from which to calculate parallax position.