# react-parallax

> A react component for simple parallax effect

### React 0.14.0 or higher is required since version 0.2.0

## Install

```sh
npm install react-parallax --save-dev
```

## [Demo](http://rrutsche.github.io/#parallax)

## Default Usage

```
var Parallax = require('react-parallax');

var TheContainer = React.createClass({
	render: function () {
  	return (
    	<div>
				<Parallax bgImage="assets/1.jpg" strength={400}>
					<br/>
					<h1>
					A collection of textile samples lay spread out on the table - Samsa was a travelling salesman - and 									above it there hung a picture that he had recently cut out of an illustrated magazine and housed 		in a 						nice, gilded frame. It showed a lady fitted out with a fur hat and fur boa who sat upright, raising a heavy 					fur muff that covered the whole of her lower arm towards the viewer. Gregor then turned to look out the 							window at the dull weather. Drops
					</h1>
				</Parallax>
      </div>
    )
  }
});
```
## Background Component

For more flexibility and styling purposes you can now add a ```<Background></Background>``` section to your Parallax Container. Child nodes inside this Background will be positioned like the bgImage behind the other children. Different from the bgImage there is no automatic scaling.
```
var {Parallax, Background} = require('react-parallax');

var TheContainer = React.createClass({
	render: function () {
    	return (
			<div>
				<Parallax strength={300}>
					<Background>
						<img src="http://www.fillmurray.com/400/300" alt="fill murray"/>
						<div style={{width: 800, height: 300, backgroundColor: '#450093'}}></div>
						<img src="http://www.fillmurray.com/500/300" alt="fill murray"/>
					</Background>
					<h1>A collection of textile samples lay spread out on the table ...</h1>
				</Parallax>
      </div>
    )
  }
});
```

# Props

* bgImage: path to the background image that makes parallax effect visible - (type: String)
* bgWidth: set bgImage width manually - (type: String), eg. '400px', 'auto'
* bgHeight: set bgImage height manually - (type: String), eg. '400px', 'auto'
* strength: parallax effect strength (in pixel), default 100. this will define the amount of pixels the background image is translated - (type: Number)
* blur: pixel value for background image blur, default: 0 - (type: Number)
* disabled: turns off parallax effect if set to true, default: false - (type: Boolean)
* className: set an additional className - (type: String) // as replacement for removed bgColor prop



# Children

The children are used to display any content inside the react-parallax component

## Development

Initial set up, run:
    
```sh
npm install
```

For watch on files, live reload, JSX transpiling and browserify, run:

```sh
grunt
```
Port on Windows is 80, 8080 on all other OS by default. Can be set with option -port=8080

# License

MIT

