stars dude

6 files changed, 124 insertions, 2 deletions

diff --git a/public/assets/img/dude.png b/public/assets/img/dude.png
new file mode 100644
index 0000000..c0246fe
--- /dev/null
+++ b/public/assets/img/dude.png
diff --git a/public/assets/img/ibm.gif b/public/assets/img/ibm.gif
deleted file mode 100644
index 0e3553a..0000000
--- a/public/assets/img/ibm.gif
+++ /dev/null
diff --git a/public/assets/ok.css b/public/assets/ok.css
index bae9334..c558a8c 100644
--- a/public/assets/ok.css
+++ b/public/assets/ok.css
@@ -145,11 +145,25 @@ h3 {
 }
 
 .intro.cover .right {
-    background: url(img/ibm.jpg)no-repeat center;
-    background-size: cover;
+    padding:0;
     width: 75%;
+    height:100%;
+}
+.intro.cover .right iframe {
+    width: 35%;
+    height: 40%;
+    position: absolute;
+    margin-top: 9%;
+    margin-left: 33%;
 }
+.intro.cover .right span {
+    background: url(img/dude.png)no-repeat center;
+    background-size: cover;
+    width:100%;
+    height:100%;
+    position: relative;
 
+}
 .menu {
     position: fixed;
     height: calc(100vh - 24px);
diff --git a/public/assets/stars/flyingthroughspace.css b/public/assets/stars/flyingthroughspace.css
new file mode 100755
index 0000000..8d867ed
--- /dev/null
+++ b/public/assets/stars/flyingthroughspace.css
@@ -0,0 +1,17 @@
+body {
+    background-color: black;
+    margin: 0;
+    padding: 0;
+}
+
+.star {
+    /*background-color: white;*/
+    /*border-radius: 30px;*/
+    width: 1px;
+    height: 1px;
+    position: absolute;
+    background: -moz-radial-gradient(closest-side circle,#FFF,#000);
+    background: -o-radial-gradient(closest-side circle,#FFF,#000);
+    background: -webkit-radial-gradient(closest-side circle,#FFF,#000);
+    background: radial-gradient(closest-side circle,#FFF,#000);
+}
\ No newline at end of file
diff --git a/public/assets/stars/flyingthroughspace.js b/public/assets/stars/flyingthroughspace.js
new file mode 100755
index 0000000..7587c71
--- /dev/null
+++ b/public/assets/stars/flyingthroughspace.js
@@ -0,0 +1,81 @@
+(function() {
+
+    var STAR_COUNT = 500;
+    var WARP_SPEED = 0.02;
+    var FPS = 30;
+
+    var getRandom = function(lbound, ubound) {
+        return window.Math.random() * (ubound - lbound) + lbound;
+    };
+
+    var windowCenter = {
+        x: window.innerWidth / 2,
+        y: window.innerHeight / 2
+    };
+
+    var Star = function() {
+        this.element = document.createElement('div');
+        this.element.className = 'star';
+        this.randomizeSpawn();
+        document.body.appendChild(this.element);
+    };
+
+    Star.prototype.randomizeSpawn = function() {
+        this.x = getRandom(1, window.innerWidth);
+        this.y = getRandom(1, window.innerHeight);
+        this.brightness = 1;//getRandom(1, 5);
+        this.distance = getRandom(0.01, 6);
+    }
+
+    Star.prototype.isOutsideField = function() {
+        return this.x < 0 ||
+               this.x > window.innerWidth ||
+               this.y > window.innerHeight ||
+               this.y < 0;
+    };
+
+    Star.prototype.setPosition = function() {
+        this.element.style.left = this.x + 'px';
+        this.element.style.top = this.y + 'px';
+        this.element.style.width = this.brightness + 'px';
+        this.element.style.height = this.brightness + 'px';
+    };
+
+    var stars = [];
+
+    var incrementFrame = function() {
+
+        for (var i = 0; i < STAR_COUNT; i++) {
+
+            var star = stars[i] = stars[i] || new Star();
+
+            // Split position by splitting into x & y vectors
+            star.x -= (windowCenter.x - star.x) * WARP_SPEED * star.distance;
+            star.y -= (windowCenter.y - star.y) * WARP_SPEED * star.distance;
+
+            if (star.isOutsideField()) {
+                // Reloate star
+                star.randomizeSpawn();
+            } else {
+                // Increase brightness
+                star.brightness += (star.distance * 0.05);
+            }
+
+            star.setPosition();
+        }
+    };
+
+    // Follow cursor
+    window.addEventListener('mousemove', function(e) {
+        windowCenter.x = e.clientX;
+        windowCenter.y = e.clientY;
+    });
+
+    // Start drawing
+    window.setInterval(function(){
+        if (document.body) {
+            incrementFrame();
+        }
+    }, 1000 / FPS);
+
+})();
\ No newline at end of file
diff --git a/public/assets/stars/index.html b/public/assets/stars/index.html
new file mode 100755
index 0000000..e6a878c
--- /dev/null
+++ b/public/assets/stars/index.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html style="overflow:hidden">
+<head>
+    <title>Flying Through Space</title>
+    <script type="text/javascript" src="flyingthroughspace.js"></script>
+    <link type="text/css" href="flyingthroughspace.css" rel="stylesheet" />
+</head>
+<body>
+</body>
+</html>
\ No newline at end of file