From e75bc9e99c672d774e1e935b37c73970d7b6d2c8 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Fri, 1 May 2015 19:10:17 -0400 Subject: edits --- site/index.js | 1 + site/public/assets/images/next.png | Bin 563 -> 1063 bytes site/public/assets/images/prev.png | Bin 0 -> 1069 bytes site/public/assets/javascripts/_env.js | 33 +++++++++++++++++++++++++++---- site/public/assets/style.css | 35 +++++++++++++++++++++++++++------ site/templates/page.liquid | 4 ---- site/templates/project.liquid | 6 +++--- 7 files changed, 62 insertions(+), 17 deletions(-) create mode 100644 site/public/assets/images/prev.png (limited to 'site') diff --git a/site/index.js b/site/index.js index 3434742..50bd870 100644 --- a/site/index.js +++ b/site/index.js @@ -41,6 +41,7 @@ var app = okcms.createApp({ { type: 'page', static: {id: 'about'}}, { type: 'page', static: {id: 'contact'}}, { type: 'shape', static: {id: 'shape-images'}}, + { type: 'shape', static: {id: 'about-images'}}, { type: 'advertising' }, { type: 'content' }, { type: 'experiential' }, diff --git a/site/public/assets/images/next.png b/site/public/assets/images/next.png index 7997259..b5782ed 100644 Binary files a/site/public/assets/images/next.png and b/site/public/assets/images/next.png differ diff --git a/site/public/assets/images/prev.png b/site/public/assets/images/prev.png new file mode 100644 index 0000000..82050a4 Binary files /dev/null and b/site/public/assets/images/prev.png differ diff --git a/site/public/assets/javascripts/_env.js b/site/public/assets/javascripts/_env.js index 45d5231..3a72e13 100644 --- a/site/public/assets/javascripts/_env.js +++ b/site/public/assets/javascripts/_env.js @@ -286,6 +286,21 @@ function build_scene () { offset: 200, }) ) + var wasPrev = false, navWidth + function resize_for_prev_next(){ + navWidth = $("nav").width() + } + resize_for_prev_next() + $(window).resize(resize_for_prev_next) + $(window).mousemove(function(e){ + if (! gallery) return + prev = ((e.pageX - navWidth) / window.innerWidth) < 0.39 + if (prev !== wasPrev) { + wasPrev = prev + $("#okgallery").toggleClass("prev", prev) + } + }) + strips.forEach(function(strip){ strip.update(0) }) scene.update() @@ -416,9 +431,15 @@ function build_gallery () { }) $("#okgallery .video").each(function(){ - var $play = $('
') var $el = $(this) + if (! is_mobile) { + var $underlay = $('
') + $underlay.css("background-image", $el.css("background-image")) + $el.css("background-image", 'none') + } + var $play = $('
') $el.append($play) + $el.append($underlay) if (is_desktop) { $play.on("click", function(e){ e.stopPropagation() @@ -454,7 +475,11 @@ function build_gallery () { // load_video($el) } else { - gallery.next() + if ($("#okgallery").hasClass("prev")) { + gallery.previous() + } else { + gallery.next() + } } }) gallery.loader.on("progress", function(imagesLoaded, loadingImage){ @@ -484,8 +509,8 @@ function load_video ($el) { var $embed = $('') $el.append($embed) if (! is_mobile) { - var $mask = $('
') - $el.append($mask) +// var $mask = $('
') +// $el.append($mask) } var player = $f( $el.find("iframe")[0] ) $el.data('player', player) diff --git a/site/public/assets/style.css b/site/public/assets/style.css index 543a34a..6316159 100644 --- a/site/public/assets/style.css +++ b/site/public/assets/style.css @@ -337,7 +337,7 @@ nav .sub { nav .sub.active { display: inline-block; - max-height:180px; + max-height: 450px; } nav .sub a { @@ -519,12 +519,14 @@ nav .sub.active a { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; + min-height: 130px; } .entry span div.content.noline { border-top: 0; padding-top: 0; } .entry span div.content div { + min-height: 130px; width:50%; -webkit-column-count: 3; -moz-column-count: 3; @@ -573,6 +575,10 @@ nav .sub.active a { height:100%; cursor: url(images/next.png), auto!important; } +.gallery.prev, +.gallery.prev .cell { + cursor: url(images/prev.png), auto!important; +} .cell.video { width: 80%; background-size: cover; @@ -613,12 +619,24 @@ nav .sub.active a { -webkit-transition:0.4s opacity ease-in; transition:0.4s opacity ease-in; pointer-events: none; -} -.cell iframe { height: 200%; -webkit-transform: translateY(-25%); transform: translateY(-25%); } +.cell .underlay { + position: absolute; + top: 0; + left: 0; + width: 100%; + height:100%; + opacity:0.2; + -webkit-transition:0.4s opacity ease-in; + transition:0.4s opacity ease-in; + pointer-events: none; + background-size: cover; + background-position: center center; +} + .fullscreen { text-align: right; } @@ -679,22 +697,27 @@ nav .sub.active a { opacity:0.0; transition:0.4s opacity ease-in; } + .cell img.loaded { opacity: 0.2; } -.cell.is-selected img, .cell.is-selected iframe { +.cell.is-selected .underlay, .cell.is-selected img, .cell.is-selected iframe { opacity:1; pointer-events: auto; } -.cell .mask { +.cell .underlay { z-index: 2; width: 100%; height: 100%; position: absolute; top: 0; left: 0; } -.cell.playing .mask { +.cell.loaded .underlay { + background-image: none !important; +} +.cell.playing .underlay { pointer-events: none; + opacity: 0; } .logo { position: fixed; diff --git a/site/templates/page.liquid b/site/templates/page.liquid index 5c3cabe..63f71f2 100644 --- a/site/templates/page.liquid +++ b/site/templates/page.liquid @@ -2,10 +2,6 @@ {% if page.image %} {{page.title}} -
- PREVIOUS ASSET - NEXT ASSET -
{{page.body | newline_to_br}} diff --git a/site/templates/project.liquid b/site/templates/project.liquid index 0dc828c..8c9a26e 100644 --- a/site/templates/project.liquid +++ b/site/templates/project.liquid @@ -2,13 +2,13 @@ {{project.title}}
- PREVIOUS ASSET - NEXT ASSET + PREVIOUS + NEXT