├── .babelrc
├── .gitignore
├── LICENSE
├── README.md
├── index.js
├── package.json
├── src
    ├── app
    │   └── index.jsx
    └── index.html
└── webpack.config.js


/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets" : ["es2015", "react"]
3 | }


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | *.log
2 | node_modules
3 | src/build


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2016 Olivier Mayer
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # react-simple-parallax
 2 | 
 3 | > A simple React Component for parallax effect on the front layer.
 4 | 
 5 | ![alt tag](https://cloud.githubusercontent.com/assets/76567/14335829/3d14bcec-fc99-11e5-9483-04c8d9e6fb5f.gif)
 6 | 
 7 | ## Install
 8 | 
 9 | ```sh
10 | npm install -S react-simple-parallax
11 | ```
12 | ## Usage
13 | 
14 | ```javascript
15 | import Parallax from 'react-simple-parallax';
16 | 
17 | class App extends React.Component {
18 |   render () {
19 | 	return (
20 | 		<section>
21 | 		  	<Parallax className="parallax" speedDivider="5">
22 | 		  		<div>Hello World!</div>
23 | 		  	</Parallax>
24 | 		</section>
25 | 	);
26 |   }
27 | }
28 | ```
29 | ## Basic styling
30 | 
31 | ```css
32 |     section {
33 |         text-align: center;
34 |     }
35 |     
36 |     /* .react-simple-parallax-bg is generate by the component */
37 |     section .react-simple-parallax-bg {
38 |         background-image: url('http://tinyurl.com/zaz7bp4');
39 |         height: 750px;
40 |     }
41 |     
42 |     section .parallax {
43 |         top: 200px;
44 |         margin: auto;
45 |     }
46 | ```
47 | ## Attributes
48 | - **speedDivider**: controle translation speed (default: 5)
49 | - **backgroundStyle**: to set the style of the background element with a javascript object (optional)
50 | 
51 | #### Example
52 | ```javascript
53 |   render () {
54 | 	var background = {
55 | 		height: "1000px",
56 | 		backgroundImage: 'url(http://tinyurl.com/zaz7bp4)'
57 | 	}
58 | 	return (
59 | 		<section>
60 | 		  	<Parallax speedDivider="3" backgroundStyle={background}>
61 | 		</section>
62 | 		)
63 |   }
64 | ```
65 | 
66 | ## Build the example
67 | 
68 | Initial set up
69 | 
70 | ```sh
71 | npm install
72 | ```
73 | 
74 | Install Webpack
75 | 
76 | ```sh
77 | npm install webpack -g
78 | ```
79 | 
80 | Build the example
81 | 
82 | ```sh
83 | webpack
84 | ```
85 | 
86 | Open `/src/index.html`
87 | 
88 | 
89 | # License
90 | 
91 | MIT
92 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | 
 3 | var React = require('react');
 4 | 
 5 | module.exports = React.createClass({
 6 |   // Define initial values
 7 |   getInitialState: function(){
 8 |     return {
 9 |       speedDivider: this.props.speedDivider ? this.props.speedDivider : 4, // Check if property speed is present if not set default value
10 |       backgroundStyle: this.props.backgroundStyle ? this.props.backgroundStyle : '', // Check if thers is a direct style applied to the parallax background
11 |     }    
12 |   },
13 |   componentDidMount: function() {
14 |     // Add event listener to the window
15 |     window.addEventListener('scroll', this._calcTranslation, 10);
16 | 
17 |     // Set basic style rules for a parallax effect
18 |     this.refs.background.setAttribute('style', 'width: 100%; top: 0; bottom: 0; background-size: cover ;background-position: 50% 0; background-repeat: no-repeat;');
19 | 
20 |     for(var key in this.state.backgroundStyle) {
21 |       this.refs.background.style[key] = this.state.backgroundStyle[key];
22 |     }
23 | 
24 |     // Set properties directly to avoid possible defined inline style
25 |     this.refs.content.style.position = 'absolute';
26 |     this.refs.content.style.left = 0;
27 |     this.refs.content.style.right = 0;
28 | 
29 |   },
30 |   componentWillUnmount: function() {
31 |     // Remove event listener to the window
32 |     window.removeEventListener('scroll', this._calcTranslation)
33 |   },
34 |   _calcTranslation: function() {
35 |     // Calculate the translation CSS property
36 |     var _window = window;
37 |     var translateValue = _window.scrollY / this.state.speedDivider;
38 |     if (translateValue < 0) {
39 |       translateValue = 0;
40 |     }
41 | 
42 |     // Aplly the transform to the background element
43 |     var translate = 'translate3d(0px,' + translateValue + 'px, 0px)';
44 |     
45 |     // Check if background exists and then apply
46 |     if (this.refs.background) {
47 |       this.refs.background.style.transform = translate;
48 |     }
49 |   },
50 |   render: function() {
51 |     // Create and render elements
52 |     var content = React.createElement('div', Object.assign({}, this.props,  { ref: 'content' }));
53 |     var background = React.createElement('div', Object.assign({}, { ref: 'background', className: 'react-simple-parallax-bg' }));
54 |     return(
55 |       React.createElement('div', Object.assign({}, { ref: 'root' }), background, content)
56 |     )
57 |   }
58 | });
59 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-simple-parallax",
 3 |   "version": "0.2.6",
 4 |   "description": "A simple React Component for parallax effect.",
 5 |   "repository": {
 6 |     "type": "git",
 7 |     "url": "https://github.com/kwemi/react-simple-parallax.git"
 8 |   },
 9 |   "main": "index.js",
10 |   "scripts": {
11 |     "test": "echo \"Error: no test specified\" && exit 1",
12 |     "dev": "NODE_ENV=development && webpack-dev-server --progress --config webpack.config.dev.js"
13 |   },
14 |   "devDependencies": {
15 |     "babel-loader": "^6.2.4",
16 |     "babel-preset-es2015": "^6.6.0",
17 |     "babel-preset-react": "^6.5.0",
18 |     "webpack": "^1.12.14",
19 |     "webpack-dev-server": "^1.12.1",
20 |     "react": "^15.0.0",
21 |     "react-dom": "^15.0.0"
22 |   },
23 |   "keywords": [
24 |     "react-component",
25 |     "parallax",
26 |     "react",
27 |     "react parallax",
28 |     "reactjs",
29 |     "effect",
30 |     "scroll"
31 |   ],
32 |   "author": "Olivier Mayer <olivier@pxleaters.com> (http://pxleaters.com)",
33 |   "license": "MIT"
34 | }
35 | 


--------------------------------------------------------------------------------
/src/app/index.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import {render} from 'react-dom';
 3 | import Parallax from '../../index.js';
 4 | 
 5 | class App extends React.Component {
 6 |   render () {
 7 | 
 8 | 	var section = {
 9 | 		textAlign: 'center'
10 | 	}
11 | 
12 |   var background = {
13 |       height: "1000px",
14 |       backgroundImage: 'url(http://tinyurl.com/zaz7bp4)'
15 |   }
16 | 
17 | 	var box = {
18 | 		top: "300px",
19 | 		background: 'rgba(0,0,0,0.8)',
20 | 		margin: 'auto',
21 | 		color: '#fff',
22 | 		fontSize: '40px',
23 | 		boxShadow: '10px 7px 5px 1px rgba(0,0,0,0.45)',
24 | 		height: '300px',
25 | 		maxWidth: '80%'
26 | 	}
27 | 
28 | 	return (
29 | 		<section style={section}>
30 | 				<Parallax style={box} className="parallax" speedDivider="5" backgroundStyle={background}>
31 | 		  		<p>Hello World!</p>
32 | 		  	</Parallax>
33 | 		</section>
34 | 	);
35 |   }
36 | }
37 | 
38 | render(<App/>, document.getElementById('app'));


--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 |   <head>
 3 |     <meta charset="utf-8">
 4 |     <title>React.js using NPM, Babel6 and Webpack</title>
 5 |   </head>
 6 |   <body style="margin:0; padding: 0">
 7 |     <div id="app" />
 8 |     <script src="build/bundle.js" type="text/javascript"></script>
 9 |  </body>
10 | </html>


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | var webpack = require('webpack');
 2 | var path = require('path');
 3 | 
 4 | var BUILD_DIR = path.resolve(__dirname, 'src/build');
 5 | var APP_DIR = path.resolve(__dirname, 'src/app');
 6 | 
 7 | var config = {
 8 |   entry: APP_DIR + '/index.jsx',
 9 |   output: {
10 |     path: BUILD_DIR,
11 |     filename: 'bundle.js'
12 |   },
13 |   module : {
14 |     loaders : [
15 |       {
16 |         test : /\.jsx?/,
17 |         include : APP_DIR,
18 |         loader : 'babel'
19 |       }
20 |     ]
21 |   }
22 | };
23 | 
24 | module.exports = config;


--------------------------------------------------------------------------------