Skip to main content


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

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


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 are also accepted and rendered



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 speed={5}>
<div className="fast" />

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" />

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