diff options
| -rw-r--r-- | site/public/assets/javascripts/_env.js | 32 | ||||
| -rw-r--r-- | site/public/assets/style.css | 4 | ||||
| -rw-r--r-- | site/templates/index.liquid | 10 |
3 files changed, 31 insertions, 15 deletions
diff --git a/site/public/assets/javascripts/_env.js b/site/public/assets/javascripts/_env.js index 31b10b7..e1d032a 100644 --- a/site/public/assets/javascripts/_env.js +++ b/site/public/assets/javascripts/_env.js @@ -177,6 +177,28 @@ environment.ready = function(){ }, 100) }, 500) }) + + + $("#scene_container").click(function(e){ + if ( $("body").hasClass("menuActive") ) { + return + } + else { + toggle_menu() + } + }) + $(document).on("mouseenter", ".project", function(){ + var type = $(this).data("type") + $(".entry").addClass("hover") + $(this).addClass("hover") + $(".cat[data-type=" + type + "]").addClass("hover") + }) + $(document).on("mouseleave", ".project", function(){ + var type = $(this).data("type") + $(".entry").removeClass("hover") + $(this).removeClass("hover") + $(".cat[data-type=" + type + "]").removeClass("hover") + }) } @@ -262,16 +284,6 @@ function build_scene () { scene.update() environment.update = environment.updateOnReady - - $("#scene_container").click(function(e){ - if ( $("body").hasClass("menuActive") ) { - return - } - else { - toggle_menu() - } - }) - } var entry_open_time = 0; diff --git a/site/public/assets/style.css b/site/public/assets/style.css index 28d0013..71d8e8f 100644 --- a/site/public/assets/style.css +++ b/site/public/assets/style.css @@ -296,6 +296,7 @@ nav a { color:black; } +.desktop nav .cat.hover, .desktop nav .cat:hover { cursor:pointer; background:#eee; @@ -742,6 +743,9 @@ nav .sub.active a { .desktop .ready .project:hover { opacity: 1.0; } +.entry.hover .project { opacity: 0.5 } +.entry.hover .project.hover { opacity: 1.0 } + .project img { width: 100%; } diff --git a/site/templates/index.liquid b/site/templates/index.liquid index 298ec0d..c5891a1 100644 --- a/site/templates/index.liquid +++ b/site/templates/index.liquid @@ -85,25 +85,25 @@ WEBSITE BY OKFOCUS, http://okfoc.us, Internet Legends. <nav> <div class="top"> <img src="assets/images/2H_WORDMARK.png" class="toplogo"> - <div class="cat">retail</div> + <div class="cat" data-type="retail">retail</div> <div class="sub" data-type="retail"> {% for project in retails %} <a href="#" data-type="retail" data-id="{{ project.id }}" data-name="{{ project.menu }}" data-image="{{ project.shape.uri }}">{{ project.menu }}</a> {% endfor %} </div> - <div class="cat">advertising</div> + <div class="cat" data-type="advertising">advertising</div> <div class="sub" data-type="advertising"> {% for project in advertisings %} <a href="#" data-type="advertising" data-id="{{ project.id }}" data-name="{{ project.menu }}" data-image="{{ project.shape.uri }}">{{ project.menu }}</a> {% endfor %} </div> - <div class="cat">experiential</div> - <div class="sub" data-type="experiental"> + <div class="cat" data-type="experiential">experiential</div> + <div class="sub" data-type="experiential"> {% for project in experientials %} <a href="#" data-type="experiential" data-id="{{ project.id }}" data-name="{{ project.menu }}" data-image="{{ project.shape.uri }}">{{ project.menu }}</a> {% endfor %} </div> - <div class="cat">content</div> + <div class="cat" data-type="content">content</div> <div class="sub" data-type="content"> {% for project in contents %} <a href="#" data-type="content" data-id="{{ project.id }}" data-name="{{ project.menu }}" data-image="{{ project.shape.uri }}">{{ project.menu }}</a> |