First example

keske · Dec 22, 2015 · 2afe964 · 2afe964
commit 2afe964
Show file tree

Hide file tree

Showing 20 changed files with 503 additions and 0 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -0,0 +1,24 @@
+{
+  "extends": "eslint-config-airbnb",
+  "env": {
+    "browser": true,
+    "node": true,
+    "mocha": true
+  },
+  "globals": {
+      "connect": true
+  },
+  "rules": {
+    "react/jsx-uses-react": 2,
+    "react/jsx-uses-vars": 2,
+    "react/react-in-jsx-scope": 2,
+    "block-scoped-var": 0,
+    "padded-blocks": 0,
+    "no-console": 0,
+    "id-length": 0,
+    "no-unused-expressions": 0,
+  },
+  "plugins": [
+    "react"
+  ]
+}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,58 @@
+# Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio
+
+*.iml
+
+## Directory-based project format:
+.idea/
+# if you remove the above rule, at least ignore the following:
+
+# User-specific stuff:
+# .idea/workspace.xml
+# .idea/tasks.xml
+# .idea/dictionaries
+
+# Sensitive or high-churn files:
+# .idea/dataSources.ids
+# .idea/dataSources.xml
+# .idea/sqlDataSources.xml
+# .idea/dynamic.xml
+# .idea/uiDesigner.xml
+
+# Gradle:
+# .idea/gradle.xml
+# .idea/libraries
+
+# Mongo Explorer plugin:
+# .idea/mongoSettings.xml
+
+## File-based project format:
+*.ipr
+*.iws
+
+## Plugin-specific files:
+
+# IntelliJ
+/out/
+
+# mpeltonen/sbt-idea plugin
+.idea_modules/
+# JIRA plugin
+atlassian-ide-plugin.xml
+
+# Crashlytics plugin (for Android Studio and IntelliJ)
+com_crashlytics_export_strings.xml
+crashlytics.properties
+crashlytics-build.properties
+node_modules/
+.sass-cache/
+bower_components/
+app/bower_components
+.DS_Store
+.tmp
+ios
+.yo-rc.json
+.jshintrc
+.gitattributes
+.editorconfig
+.babelrc
+npm-debug.log
diff --git a/README.md b/README.md
@@ -0,0 +1 @@
+React parallax component
diff --git a/dist/ParallaxComponent.min.js b/dist/ParallaxComponent.min.js
diff --git a/dist/ParallaxComponent.min.js.map b/dist/ParallaxComponent.min.js.map
diff --git a/index.html b/index.html
@@ -0,0 +1,17 @@
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <title>Redux Easy Boilerplate</title>
+  <meta name="description" content="">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="shortcut icon" type="image/png" href="./src/images/favicon.png"/>
+</head>
+
+<body>
+  <div id="root"></div>
+</body>
+
+<script src="dist/bundle.js"></script>
+
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,2 @@
+var ParallaxComponent = require('./dist/ParallaxComponent.min.js');
+module.exports = ParallaxComponent;
diff --git a/package.json b/package.json
@@ -0,0 +1,67 @@
+{
+  "name": "react-parallax-component",
+  "version": "1.0.0",
+  "description": "",
+  "scripts": {
+    "start": "node server.js",
+    "lint": "eslint src",
+    "build": "webpack --verbose --colors --display-error-details --config webpack/prod.config.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/keske/react-parallax-component.git"
+  },
+  "keywords": [
+    "react",
+    "reactjs",
+    "parallax",
+    "animation",
+    "webpack"
+  ],
+  "author": "https://github.com/keske",
+  "license": "MIT",
+  "devDependencies": {
+    "autoprefixer": "^6.0.2",
+    "babel-core": "^5.4.7",
+    "babel-eslint": "^4.0.7",
+    "babel-loader": "^5.1.4",
+    "babel-runtime": "^5.5.5",
+    "classnames": "^2.1.3",
+    "css-loader": "^0.22.0",
+    "cssnext-loader": "^1.0.1",
+    "csswring": "^4.0.0",
+    "deep-equal": "^1.0.1",
+    "eslint": "^1.9.0",
+    "eslint-config-airbnb": "0.1.0",
+    "eslint-plugin-react": "^3.2.3",
+    "expect": "^1.12.0",
+    "exports-loader": "^0.6.2",
+    "express": "^4.13.3",
+    "express-open-in-editor": "^1.0.0",
+    "extract-text-webpack-plugin": "^0.8.2",
+    "file-loader": "^0.8.4",
+    "imports-loader": "^0.6.4",
+    "less": "^2.5.3",
+    "less-loader": "^2.2.1",
+    "morgan": "^1.6.1",
+    "node-sass": "^3.1.2",
+    "postcss-loader": "^0.7.0",
+    "qs": "^5.2.0",
+    "ramda": "^0.19.0",
+    "react-addons-css-transition-group": "^0.14.2",
+    "react-document-meta": "^2.0.0-rc2",
+    "react-dom": "^0.14.2",
+    "react-hot-loader": "^1.2.7",
+    "sass-loader": "^3.0.0",
+    "style-loader": "^0.13.0",
+    "url-loader": "^0.5.6",
+    "webpack": "^1.9.6",
+    "webpack-dev-middleware": "^1.2.0",
+    "webpack-dev-server": "^1.8.2",
+    "webpack-hot-middleware": "^2.4.1",
+    "yargs": "^3.18.0"
+  },
+  "dependencies": {
+    "react": "^0.14.2"
+  }
+}
diff --git a/server.js b/server.js
@@ -0,0 +1,34 @@
+var http = require('http');
+var express = require('express');
+var app = express();
+
+app.use(require('morgan')('short'));
+
+(function initWebpack() {
+  var webpack = require('webpack');
+  var webpackConfig = require('./webpack/dev.config');
+  var compiler = webpack(webpackConfig);
+
+  app.use(require('webpack-dev-middleware')(compiler, {
+    noInfo: true, publicPath: webpackConfig.output.publicPath,
+  }));
+
+  app.use(require('webpack-hot-middleware')(compiler, {
+    log: console.log, path: '/__webpack_hmr', heartbeat: 10 * 1000,
+  }));
+
+  app.use(express.static(__dirname + '/'));
+})();
+
+app.get('/', function root(req, res) {
+  res.sendFile(__dirname + '/index.html');
+});
+
+if (require.main === module) {
+  var server = http.createServer(app);
+  server.listen(process.env.PORT || 3000, function onListen() {
+    var address = server.address();
+    console.log('Listening on: %j', address);
+    console.log(' -> that probably means: http://localhost:%d', address.port);
+  });
+}
diff --git a/src/example/images/1.jpg b/src/example/images/1.jpg
diff --git a/src/example/images/2.jpg b/src/example/images/2.jpg
diff --git a/src/example/images/3.jpg b/src/example/images/3.jpg
diff --git a/src/example/index.js b/src/example/index.js
@@ -0,0 +1,61 @@
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+import R from 'ramda';
+
+// Lib
+import ParallaxComponent from '../';
+
+// Component styles
+import styles from './styles';
+
+// Images
+const images = R.range(1, 3 + 1).map(index => require(`./images/${index}.jpg`));
+
+export default class ExamplePage extends Component {
+  render() {
+
+    const wrap = {
+      height: window.innerHeight * 77,
+    };
+
+    return (
+      <div className={`${styles}`}
+           style={wrap}>
+
+        <ParallaxComponent speed="0.03"
+                           width="40%"
+                           top="10%"
+                           left="10%">
+          <img src={images[0]} />
+        </ParallaxComponent>
+
+        <ParallaxComponent speed="0.05"
+                           width="40%"
+                           top="10%"
+                           left="50%">
+          <img src={images[1]} />
+        </ParallaxComponent>
+
+        <ParallaxComponent speed="-0.08"
+                           width="40%"
+                           top="55%"
+                           left="10%">
+          <img src={images[1]} />
+        </ParallaxComponent>
+
+        <ParallaxComponent speed="-0.01"
+                           width="40%"
+                           top="55%"
+                           left="50%">
+          <img src={images[0]} />
+        </ParallaxComponent>
+
+      </div>
+    );
+  }
+}
+
+ReactDOM.render(
+  <ExamplePage />,
+  document.getElementById('root')
+);
diff --git a/src/example/styles/index.js b/src/example/styles/index.js
@@ -0,0 +1,2 @@
+import 'style!./styles.scss';
+export default require('./styles.scss').locals.styles;
diff --git a/src/example/styles/styles.scss b/src/example/styles/styles.scss
@@ -0,0 +1,3 @@
+:local(.styles) {
+  position: relative;
+}
diff --git a/src/index.js b/src/index.js
@@ -0,0 +1,80 @@
+import React, { Component } from 'react';
+
+// Component styles
+import styles from './styles';
+
+const DEFAULT_SPEED = '-0.03';
+
+export default class ParallaxComponent extends Component {
+
+  static propTypes = {
+    children: React.PropTypes.object,
+    speed: React.PropTypes.string,
+
+    // Style
+    width: React.PropTypes.string,
+    height: React.PropTypes.string,
+    top: React.PropTypes.string,
+    left: React.PropTypes.string,
+  }
+
+  constructor(props) {
+    super(props);
+
+    this.handleScroll = this.handleScroll.bind(this);
+  }
+
+  componentDidMount() {
+    window.addEventListener('scroll', this.handleScroll);
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('scroll', this.handleScroll);
+  }
+
+  getTop() {
+    const { top = 0 } = this.props;
+
+    return top.indexOf('%') > -1
+      ? window.innerHeight * (top.replace('%', '') / 100)
+      : +top
+  }
+
+  handleScroll() {
+    const {
+      speed = DEFAULT_SPEED,
+    } = this.props;
+
+    const top = this.getTop();
+
+    // Top positons
+    const pageTop = window.pageYOffset;
+    const elemTop = this.refs.parallaxElement.offsetTop;
+    const newTop = (((pageTop - elemTop) * (+speed * -1)) + top).toFixed(0);
+
+    // Set new top position
+    this.refs.parallaxElement.style.top = `${newTop}px`;
+  }
+
+  render() {
+    const {
+      width = 'auto',
+      height = 'auto',
+      top = '0',
+      left = '0',
+    } = this.props;
+
+    return (
+      <div className={`${styles}`}
+           style={{
+             width,
+             height,
+             top,
+             left,
+           }}
+           ref="parallaxElement">
+        {this.props.children}
+      </div>
+    );
+  }
+}
diff --git a/src/styles/index.js b/src/styles/index.js
@@ -0,0 +1,2 @@
+import 'style!./styles.scss';
+export default require('./styles.scss').locals.styles;
diff --git a/src/styles/styles.scss b/src/styles/styles.scss
@@ -0,0 +1,7 @@
+:local(.styles) {
+  position: fixed;
+
+  img {
+    width: 100%;
+  }
+}