0.1.2 • Published 6 years ago

react-parallax-3d v0.1.2

Weekly downloads
2
License
ISC
Repository
github
Last release
6 years ago

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

sample

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

NameTypeDefaultDescription
IDnumberundefinedA unique ID number
scenenumber0The current scene
imgstringempty stringAn image url for the scene background
titlestringempty stringA string to be used as the title
subTitlestringempty stringA string to be used as subtitle

License

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