flobiwankenobi / react-simple-parallax

A simple React Component for parallax effect on the front layer.

react-simple-parallax

A simple React Component for parallax effect on the front layer.

Install

npm install -S react-simple-parallax

Usage

import Parallax from 'react-simple-parallax';

class App extends React.Component {
  render () {
	return (
		<section>
		  	<Parallax className="parallax" speedDivider="5">
		  		<div>Hello World!</div>
		  	</Parallax>
		</section>
	);
  }
}

Basic styling

    section {
        text-align: center;
    }
    
    /* .react-simple-parallax-bg is generate by the component */
    section .react-simple-parallax-bg {
        background-image: url('http://tinyurl.com/zaz7bp4');
        height: 750px;
    }
    
    section .parallax {
        top: 200px;
        margin: auto;
    }

Attributes

• speedDivider: controle translation speed (default: 5)
• backgroundStyle: to set the style of the background element with a javascript object (optional)

Example

  render () {
	var background = {
		height: "1000px",
		backgroundImage: 'url(http://tinyurl.com/zaz7bp4)'
	}
	return (
		<section>
		  	<Parallax speedDivider="3" backgroundStyle={background}>
		</section>
		)
  }

Build the example

Initial set up

npm install

Install Webpack

npm install webpack -g

Build the example

webpack

Open /src/index.html

License

MIT