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}>

Build the exemple

Initial set up

npm install

Install Webpack

npm install webpack -g

Build the exemple

webpack

Open /src/index.html

License

MIT