react-simple-parallax

0.2.6 • Public • Published

react-simple-parallax

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

alt tag

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

Package Sidebar

Install

npm i react-simple-parallax

Weekly Downloads

11

Version

0.2.6

License

MIT

Last publish

Collaborators

  • omayer