Last commit before refactor

package.json

@@ -36,8 +36,7 @@
     "react-redux": "^5.0.7",
     "react-router": "^4.2.0",
     "react-router-dom": "^4.2.2",
-    "redux": "^3.7.2",
-    "three": "^0.90.0"
+    "redux": "^3.7.2"
   },
   "devDependencies": {
     "babel-cli": "^6.26.0",

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() {

public/styles/components/_background-layer.scss

@@ -0,0 +1,44 @@
+/*
+ *  Background Layer
+ *    Styles for the background layer component.
+ *
+ *  Dependencies:
+ *
+ *  Version:
+ *    1.0.0 - 2018/03/21
+ */
+ $starSize: 1024px;
+ $starTime: 4s;
+ $starSizeMobile: 0.5;
+ $starTimeMobile: $starTime / $starSizeMobile;
+
+.c-background-layers {
+  position: fixed;
+  width: 100vw;
+  height: 100vh;
+  top: 0;
+  left: 0;
+  &__wrapper {
+    position: relative;
+    overflow: hidden;
+    width: 100%;
+    height: 100%;
+  }
+
+  perspective: 0px;
+}
+
+.c-background-layer {
+  width: 100%;
+  background-repeat: repeat;
+  position: fixed;
+  top: 0;
+  left: 0;
+
+  @for $i from 0 through 3 {
+    &--stars-#{$i} {
+      height: 200% + (50% * $i);
+      background-image: url('./../images/stars#{$i}.png');
+    }
+  }
+}

public/styles/components/_footer.scss

@@ -12,13 +12,14 @@
  */
 $c-footer--text-color: $s-color--text;
 $c-footer--background-color: $s-color--background-default;
-
+$c-footer--z-index: 10;//Should render over most if not all body elements
 
 .c-footer {
   width: 100%;
   background: $c-footer--background-color;
   @extend %t-flexbox;
   @include t-flex-wrap(wrap);
+  z-index: $c-footer--z-index;
 }
 
 .c-footer__copyright {

public/styles/components/_page.scss

@@ -12,7 +12,13 @@
 .c-page {
   min-height: 100%;
   @include t-flex-grow(1);
-  @include t-gradient-directional($s-color--background-bottom, $s-color--background-top, 45deg);
+  //@include t-gradient-directional($s-color--background-bottom, $s-color--background-top, 45deg);
   padding-bottom: 5em;
-  background-attachment: fixed;
+
+  //background-attachment: fixed;
+  //background-color: #000019;
+  //background-image: url('./../images/space.png');
+  //background-repeat: repeat-x;
+  //background-position: center bottom;
+  //background-size: (16px / 1) (384px / 1);
 }

public/styles/components/_section--style-three.scss

@@ -17,8 +17,7 @@
 
 .c-section--style-three__canvas {
   width: 100%;
-  height: 100%;
-  height: 80vmin;
+  height: 100vh;
   top: 0;
   left: 0;
   position: absolute;

public/styles/components/_section.scss

@@ -15,6 +15,7 @@
   max-width: $s-layout--page-max;
   z-index: 1;
   position:relative;
+  margin: 0 auto;
 }
 
 .c-section--full-width {

public/styles/index.scss

@@ -46,6 +46,7 @@
 
 //Components
 @import './components/_app.scss';
+@import './components/_background-layer';
 @import './components/_footer.scss';
 @import './components/_form.scss';
 @import './components/_header.scss';