diff options
Diffstat (limited to 'public/assets')
| -rw-r--r-- | public/assets/img/dude.png | bin | 0 -> 597926 bytes | |||
| -rw-r--r-- | public/assets/img/ibm.jpg | bin | 0 -> 398560 bytes | |||
| -rw-r--r-- | public/assets/img/ryder-ripps.gif | bin | 0 -> 197976 bytes | |||
| -rw-r--r-- | public/assets/js/lib/ProjectView.js | 3 | ||||
| -rw-r--r-- | public/assets/ok.css | 111 | ||||
| -rwxr-xr-x | public/assets/stars/flyingthroughspace.css | 17 | ||||
| -rwxr-xr-x | public/assets/stars/flyingthroughspace.js | 81 | ||||
| -rwxr-xr-x | public/assets/stars/index.html | 10 |
8 files changed, 187 insertions, 35 deletions
diff --git a/public/assets/img/dude.png b/public/assets/img/dude.png Binary files differnew file mode 100644 index 0000000..c0246fe --- /dev/null +++ b/public/assets/img/dude.png diff --git a/public/assets/img/ibm.jpg b/public/assets/img/ibm.jpg Binary files differnew file mode 100644 index 0000000..d6ced6a --- /dev/null +++ b/public/assets/img/ibm.jpg diff --git a/public/assets/img/ryder-ripps.gif b/public/assets/img/ryder-ripps.gif Binary files differnew file mode 100644 index 0000000..0dd6d08 --- /dev/null +++ b/public/assets/img/ryder-ripps.gif diff --git a/public/assets/js/lib/ProjectView.js b/public/assets/js/lib/ProjectView.js index 9413cc2..2c53cf5 100644 --- a/public/assets/js/lib/ProjectView.js +++ b/public/assets/js/lib/ProjectView.js @@ -17,6 +17,7 @@ var ProjectView = View.extend({ this.images = this.$images.toArray().map(function(img){ return $(img).data("uri") }) + if (is_mobile) { this.$iframes.remove() this.$videos.remove() @@ -76,6 +77,7 @@ var ProjectView = View.extend({ }, show: function(){ + var audio = this.$("audio") app.header.updatePageNumber( this.page_number ) app.header.updateSlideNumber( 0 ) app.header.updateSlideCount( this.slide_count ) @@ -120,6 +122,7 @@ var ProjectView = View.extend({ }, hide: function(){ + addClassForPeriod( this.el, "hiding", app.navigation_delay, function(){ this.reset() }.bind(this) ) diff --git a/public/assets/ok.css b/public/assets/ok.css index 14a8cd6..1e8bcb4 100644 --- a/public/assets/ok.css +++ b/public/assets/ok.css @@ -11,6 +11,7 @@ html { outline: 0; border: 0; -webkit-appearance: none; + -webkit-font-smoothing: subpixel-antialiased; } ::selection { @@ -21,11 +22,17 @@ html { color: blue; } +audio { + position: fixed; + top: -800000px; + left: -90000px; + opacity: 0; +} + a, a:visited { color: blue; font-weight: bold; - font-size: 11px; cursor: pointer; } @@ -91,7 +98,7 @@ h3 { } .intro { - font-size: 12px; + font-size: 14px; line-height: 20px; } @@ -115,17 +122,14 @@ h3 { .intro div.text { width: 50%; -webkit-column-count: 2; - -webkit-column-gap: 5px; - -moz-column-gap: 5px; - column-gap: 5px; - font-size: 12px; + -webkit-column-gap: 10px; + -moz-column-gap: 10px; + column-gap: 10px; } -.intro .right { - background: url(http://ryder-ripps.com/press/ryder-ripps.jpg)no-repeat center; +.intro.single .right { + background: url(img/ryder-ripps.gif)no-repeat center; background-size: cover; - -webkit-filter: grayscale(100%); - filter: grayscale(100%); } .intro.cover .left span#cred { @@ -139,11 +143,25 @@ h3 { } .intro.cover .right { - background: url(img/crater.gif)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); @@ -328,15 +346,16 @@ span { } #curtain { - position: absolute; - top: 0; left: 0; - background: black; - transition: 200ms opacity cubic-bezier(0, 0, 0, 1); - opacity: 0; - z-index: 1; - width: 100%; - height: 100%; - pointer-events: none; + position: absolute; + top: 0; + left: 0; + background: black; + transition: 200ms opacity cubic-bezier(0, 0, 0, 1); + opacity: 0; + z-index: 1; + width: 100%; + height: 100%; + pointer-events: none; } .navopen #curtain { @@ -531,6 +550,7 @@ body { margin-left: 20vw; cursor: url(img/u.png) 32 0, pointer; } + .whitecursor .page-up { cursor: url(img/u-white.png) 32 0, pointer; } @@ -545,6 +565,7 @@ body { margin-left: 20vw; cursor: url(img/d.png) 32 64, pointer; } + .whitecursor .page-down { cursor: url(img/d-white.png) 32 64, pointer; } @@ -597,6 +618,7 @@ button.next { cursor: url(img/r.png)64 32, pointer; z-index: 4; } + .whitecursor button.next { cursor: url(img/r-white.png)64 32, pointer; } @@ -606,6 +628,7 @@ button.previous { cursor: url(img/l.png) 0 32, pointer; z-index: 4; } + .whitecursor button.previous { cursor: url(img/l-white.png) 0 32, pointer; } @@ -713,7 +736,7 @@ nav { .projectLink { display: block; - + margin-top: 3px; } ul li { @@ -733,7 +756,7 @@ ul li { display: none; } -@media (min-width: 1200px) { +@media (min-width: 1200px) { .texts { font-size: 13px; line-height: 16px; @@ -749,18 +772,39 @@ ul li { .projectLink { margin-top: 3px; } + .intro div.text, + h3, .left a { + font-size: 14px; + line-height: 20px; + } } -/* - @media (min-width: 1400px) { - .texts { - font-size: 14px; - line-height: 16px; - } +@media (min-width: 1500px) { + .intro div.text, + h3, + .left a { + font-size: 16px; + line-height: 25px; + } + h1 { + font-size: 40px; + line-height: 50px; + } +} + + +@media (max-height: 980px) { + .intro div.text, + h3, .left a { + font-size: 14px; + line-height: 20px; } - +} + + +/* @media (min-width: 1600px) { .texts { font-size: 15px; @@ -812,8 +856,6 @@ ul li { .texts { padding: 3px 5px; } - - .five span { width: 100%; border-bottom: 1px solid; @@ -830,12 +872,11 @@ ul li { -moz-column-gap: 3px; column-gap: 3px; border-bottom: 0; - border-top:2px; + border-top: 2px; text-align: justify; } - .projectLink { - display:none; + display: none; } .press .five span:last-child { display: none; 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 |
