react-parallax-3d

react-parallex-3d

React-parallax-3d provides the ability to show a 3d parallax effect on the given image.
NOTE: this project initially supports google chrome only
See a demo

Screen cast

You can still see a video demo even if it didn't work on your web broweser:
https://www.youtube.com/watch?v=788Gz6l0SW0

Usage

import React, {Component, Fragment} from "react";
import Scene from "react-parallax-3d";
 
class Parallax extends Component {
    state = { scene: 0 };
 
    render() {
        const scene = this.state.scene;
 
        return (
            <Fragment>
                <Scene
                    ID={0}
                    scene={scene}
                    img="/background-img.jpg"
                    title="REACT"
                    subTitle="AWESOME"
                />
                <Scene
                    ID={1}
                    scene={scene}
                    img="/background-img2.jpg"
                    title="SVG"
                    subTitle="REAL HOT"
                />
            </Fragment>
        );
    }
}

Instalation

npm install react-parallax-3d or yarn add react-parallax-3d

Component API

Name	Type	Default	Description
ID	number	undefined	A unique ID number
scene	number	0	The current scene
img	string	empty string	An image url for the scene background
title	string	empty string	A string to be used as the title
subTitle	string	empty string	A string to be used as subtitle

License

react-parallax-3d is under the MIT license.