Parallax Scroll Effect For Images & Backgrounds - react-parallax

Description:

A highly customizable React parallax library to apply smooth parallax scroll effects on images or backgrounds.

Installation:

# NPM
$ npm install react-parallax --save
# Bower
$ bower install react-parallax --save

Basic usage:

1. Import the necessary modules.

import React from "react";
import { render } from "react-dom";
import { Parallax, Background } from "react-parallax";

2. Apply the parallax effect to an image.

const imageDemo = "1.jpg";
const App = () => (
  <div>
    <Parallax bgImage={imageDemo} strength={500}>
      <div style={{ height: 500 }}>
        <div>HTML inside the parallax</div>
      </div>
    </Parallax>
  </div>
);

3. Apply the parallax effect to an background.

<Parallax
  bgImage={'/path/to/another/image'}
  strength={400}
  renderLayer={percentage => (
      <div
          style={{
              position: 'absolute',
              background: `rgba(255, 125, 0, ${percentage * 1})`,
              left: '50%',
              top: '50%',
              width: percentage * 500,
              height: percentage * 500,
          }}
      />
  )}
>