From edb135e0d2a441e072571601d17c858319c7b6fa Mon Sep 17 00:00:00 2001 From: “Ryder <“r@okfoc.us”> Date: Tue, 12 Apr 2016 20:46:44 -0400 Subject: stars dude --- public/assets/img/dude.png | Bin 0 -> 597926 bytes public/assets/img/ibm.gif | Bin 555339 -> 0 bytes public/assets/ok.css | 18 ++++++- public/assets/stars/flyingthroughspace.css | 17 ++++++ public/assets/stars/flyingthroughspace.js | 81 +++++++++++++++++++++++++++++ public/assets/stars/index.html | 10 ++++ 6 files changed, 124 insertions(+), 2 deletions(-) create mode 100644 public/assets/img/dude.png delete mode 100644 public/assets/img/ibm.gif create mode 100755 public/assets/stars/flyingthroughspace.css create mode 100755 public/assets/stars/flyingthroughspace.js create mode 100755 public/assets/stars/index.html (limited to 'public/assets') diff --git a/public/assets/img/dude.png b/public/assets/img/dude.png new file mode 100644 index 0000000..c0246fe Binary files /dev/null and b/public/assets/img/dude.png differ diff --git a/public/assets/img/ibm.gif b/public/assets/img/ibm.gif deleted file mode 100644 index 0e3553a..0000000 Binary files a/public/assets/img/ibm.gif and /dev/null differ 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 @@ + + +
+