react-parallax-scroll

React Parallax Scroll

A lightweight React library for creating parallax scroll.

Demo

Banner Parallax Demo

Awesome Animated Demo

Install

npm install react-parallax-scroll

Parallax Usage

import React from 'react';
import Parallax, { Layer } from 'react-parallax-scroll'; 

const App = () => {
  return (
    <Parallax>
        {/* ----- Banner parallax -----*/}
        <Layer settings={{ speed: 0.2, type: 'backgroundY' }}>
            <p>A child element</p>
        </Layer>
        
        {/* ----- PositionY parallax -----*/}
        <Layer settings={{ speed: 0.2, type: 'translateY' }}></Layer>
        
        {/* ----- PostionY parallax in reverse direction -----*/}
        <Layer settings={{ speed: -0.2, type: 'translateY' }}></Layer>
        
        {/* ----- PositionX parallax -----*/}
        <Layer settings={{ speed: 0.2, type: 'translateX' }}></Layer>
        
        {/* ----- Zoom parallax -----*/}
        <Layer settings={{ speed: 0.2, type: 'rotate' }}></Layer>
        
        {/* ----- Put Layer to wherever you like -----*/}
        <div>
            <div>
                <Layer settings={{ speed: 0.2, type: ['rotate'] }}></Layer>
            </div>
        </div>
    </Parallax>
  )
}

export default App;

Available types:

Type	Description
backgroundY	change container's background vertically
backgroundX	change container's background horizontally
translateY	change container's position vertically
translateX	change container's position horizontally
rotate	rotate container

Appear Usage

If you're familiar with wowjs, it should be the same behavior. In this section, I use animated.css for my component. You can create your own animated classes if you're comfortable with.

import React from 'react';
import Parallax, { AppearLayer } from 'react-parallax-scroll'; 
import './animated.css';

const App = () => {
  return (
    <Parallax>
        {/* ----- appear with .rotateIn class and duration 1.5 seconds -----*/}
        <AppearLayer className="whatever" in="rotateIn" duration="1.5s">A simple text</AppearLayer>
        
        {/* ----- appear with .slideInUp -----*/}
        <AppearLayer className="whatever-1" in="slideInUp" duration="1s">
            <p>An element</p>
        </AppearLayer>
        
        {/* ----- appear with 3 times loop -----*/}
        <AppearLayer in="rotateIn" duration="1.5s" loop="3">Play 3 times</AppearLayer>
        
        {/* ----- appear with infinite loop -----*/}
        <AppearLayer in="heartBeat" duration="1.5s" loop="infinite">Play forever</AppearLayer>
    </Parallax>
  )
}

export default App;