Last commit before refactor

public/components/Page.jsx

@@ -19,7 +19,7 @@ class Page extends React.Component {
   render() {
     let clazz = "c-page";
     if(this.props.className) clazz += " " + this.props.className;
-    
+
     return (
       <main className={clazz}>
         {this.props.children}

public/components/background/BackgroundLayer.jsx

@@ -0,0 +1,26 @@
+/*
+ *  Background Layer
+ *    Simple Background Layer.
+ *
+ *  Dependencies:
+ *    styles/components/_background-layer.scss
+ *
+ *  Version:
+ *    1.0.0 - 2018/02/24
+ */
+import React from 'react';
+
+class BackgroundLayer extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <div class={"c-background-layer c-background-layer--" + this.props.layer} ref="layer">
+      </div>
+    );
+  }
+}
+
+export default BackgroundLayer;

public/components/background/BackgroundLayers.jsx

@@ -0,0 +1,64 @@
+/*
+ *  Background Layers
+ *    Wrapper for the background layer's, provides logic in a cost efficient manner.
+ *
+ *  Dependencies:
+ *    ./BackgrundLayer.jsx
+ *
+ *  Version:
+ *    1.0.0 - 2018/02/24
+ */
+import React from 'react';
+import BackgroundLayer from './BackgroundLayer';
+
+class BackgroundLayers extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  componentDidMount() {
+    this.layerMounted = true;
+    this.onFrame();
+  }
+
+  componentWillUnmount() {
+    this.layerMounted = false;
+  }
+
+  onFrame() {
+    if(this.layerMounted) {
+      requestAnimationFrame(this.onFrame.bind(this));
+    }
+
+    //https://stackoverflow.com/questions/2387136/cross-browser-method-to-determine-vertical-scroll-percentage-in-javascript
+    let h = document.documentElement,
+      b = document.body,
+      st = 'scrollTop',
+      sh = 'scrollHeight';
+    let percent = (h[st]||b[st]) / ((h[sh]||b[sh]) - h.clientHeight) * 100;
+
+    for(var i = 0; i < this.props.layers.length; i++) {
+      let layerContainer = this.refs["layer-"+i];
+      let layer = layerContainer.refs.layer;
+      layer.style["transform"] = "translateY(-"+(percent/4)+"%) translateZ(0)";
+    }
+  }
+
+  render() {
+    let layers = [];
+
+    for(var i = 0; i < this.props.layers.length; i++) {
+      let l = this.props.layers[i];
+      let e = <BackgroundLayer layer={l.layer} key={"layer-"+i} ref={"layer-"+i} />
+      layers.push(e);
+    }
+
+    return (
+      <div class="c-background-layers" ref="">
+        {layers}
+      </div>
+    );
+  }
+}
+
+export default BackgroundLayers;

public/components/sections/Poly.jsx

@@ -17,32 +17,18 @@ import staticGIF from './../../images/static.gif';
 const CUBES = [
   {
     size: [1, 1, 1],
-    pos: [-4,-0.3,1],
+    pos: [-4,-1,1],
     velocity: [0.3, 0.1, 0],
     color: 0xFFFFFF,
     pvm: true
   },
   {
     size: [1, 1, 1],
-    pos: [1,-0.8,-0.3],
+    pos: [0.5,-0,-0.3],
     velocity: [-0.3, 0.05, 0.1],
     color: 0xCCFFFF,
     pvm: true
   },
-  {
-    size: [1, 1, 1],
-    pos: [-0.8,0.4,-5],
-    velocity: [0, -0.1, 0.1],
-    color: 0xf7ffb7,
-    pvm: true
-  },
-  {
-    size: [1, 1, 1],
-    pos: [6,1,-2],
-    velocity: [0.2, 0.5, 0],
-    color: 0xffb7ee,
-    pvm: true
-  },
   {
     size: [1, 1, 1],
     pos: [-3,1,0.3],
@@ -52,7 +38,7 @@ const CUBES = [
   },
   {
     size: [0.8, 0.8, 0.8],
-    pos: [2.2,1,0.3],
+    pos: [3.4,-0.6,0.3],
     velocity: [1, 0.1, -0.1],
     color: 0xff66ab,
     pvm: true

public/components/sections/ThreeSection.jsx

@@ -26,15 +26,15 @@ class ThreeSection extends React.Component {
 
     this.camera.position.z = 5;
 
-    this.ambient1 = new THREE.AmbientLight(0xFFCCFF, 0.2);
-    this.scene.add(this.ambient1);
-    this.ambient2 = new THREE.AmbientLight(0xFFFFFF, 0.5);
-    this.scene.add(this.ambient2);
+    //this.ambient1 = new THREE.AmbientLight(0xFFCCFF, 0.2);
+    //this.scene.add(this.ambient1);
+    //this.ambient2 = new THREE.AmbientLight(0xFFFFFF, 0.5);
+    //this.scene.add(this.ambient2);
 
-    this.light = new THREE.DirectionalLight(0x22BBFF, 0.5);
+    this.light = new THREE.DirectionalLight(0x22BBFF, 0.3);
     this.light.position.x = this.camera.position.x;
     this.light.position.y = this.camera.position.y;
-    this.light.position.z = this.camera.position.z + 8;
+    this.light.position.z = this.camera.position.z + 5;
     this.scene.add(this.light);
 
     if(typeof this.props.onSetup !== typeof undefined) {
@@ -75,7 +75,7 @@ class ThreeSection extends React.Component {
     this.renderer.render(this.scene, this.camera);
     this.lastTime = now;
 
-    requestAnimationFrame(this.onFrame.bind(this));
+    //requestAnimationFrame(this.onFrame.bind(this));
   }
 
   render() {