react-parallax-scroll v0.1.1

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:

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;