Parallax

The main component for applying scroll effects based on an elements position within the viewport.

import { Parallax } from 'react-scroll-parallax';

Props

All props to configure the parallax element, like CSS effects, are documented and managed by the parallax-controller.

See all the parallax props that this component will accept.

Non Parallax Props

All other non-parallax props will be passed through to the <div>. Example with style and className:

<Parallax style={{ background: 'blue' }} className="test" />

Output HTML

<div style="background: blue" className="test"></div>

Children

Children are also accepted and rendered

<Parallax>
  <h1>Hello</h1>
</Parallax>

Examples

Some basic example of how to use the <Parallax> component.

Speed Control

The speed prop that will make an element's scroll speed appear to speed up or slow down. This is the simplest way to achieve a parallax effect.

const SlowAndFast = () => (
  <>
    <Parallax speed={-5}>
      <div className="slow" />
    </Parallax>
    <Parallax speed={5}>
      <div className="fast" />
    </Parallax>
  </>
);

info

The speed prop simplifies the application of a translateX or translateY effect based on the ParallaxController scroll axis – See <ParallaxProvider /> Props

Translate Controls

If you need more fine tune control of the scroll position you can apply start and end transforms more directly. In this example the element begins with a translateY(-20%) and ends with translateY(10%)

const TranslateY = () => (
  <Parallax translateY={[-20, 10]}>
    <div className="my-thing" />
  </Parallax>
);

info

Translate values without units default to % so -20 becomes -20%.