react-simple-parallax
A simple React Component for parallax effect on the front layer.
Install
npm install -S react-simple-parallaxUsage
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 installInstall Webpack
npm install webpack -gBuild the example
webpackOpen /src/index.html
License
MIT
