https://github.com/bigfanjs/react-parallax-3d

React-parallax-3d provides the ability to show a 3d parallax effect on the given image
https://github.com/bigfanjs/react-parallax-3d

Last synced: about 2 months ago
JSON representation

React-parallax-3d provides the ability to show a 3d parallax effect on the given image

• Host: GitHub
• URL: https://github.com/bigfanjs/react-parallax-3d
• Owner: bigfanjs
• License: mit
• Created: 2018-06-25T14:15:02.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2018-06-26T23:23:23.000Z (over 6 years ago)
• Last Synced: 2024-04-30T17:04:21.797Z (8 months ago)
• Language: JavaScript
• Size: 98.6 KB
• Stars: 35
• Watchers: 5
• Forks: 7
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        
# 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](https://bigfanjs.github.io/react-parallax-3d-demo/)  

![sample](https://user-images.githubusercontent.com/10690029/41943988-a5790ec2-799d-11e8-870a-342d298b0368.gif)

# 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

```js

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 (

            

                

                

            

        );

    }

}

```

# 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.