Skip to content
Browse files

Refactor idle opacities.

  • Loading branch information...
1 parent 04645f2 commit 0f38bad2998f06e29cb565242360ffaabc7b735b @moll moll committed May 22, 2012
Showing with 21 additions and 22 deletions.
  1. +13 −18 public/hackersays.js
  2. +8 −4 public/themes/base.scss
View
31 public/hackersays.js
@@ -11,25 +11,20 @@ $(function() {
}
if ($.cookie("theme")) showTheme($.cookie("theme"));
+})
- var opacityResetTimer, mouseMoveTimer, lastPageX, lastPageY,
- opacityElsSelector = "#share a, #toolbar a",
- originalControlsOpacity = $(opacityElsSelector).css("opacity");
-
- $(document).mousemove(function(ev) {
- clearTimeout(mouseMoveTimer);
- mouseMoveTimer = setTimeout(function() {
- if (ev.pageX == lastPageX && ev.pageY == lastPageY)
- return;
-
- lastPageX = ev.pageX; lastPageY = ev.pageY;
- $(opacityElsSelector).stop(true).animate({opacity: 1}, 400);
- clearTimeout(opacityResetTimer);
- opacityResetTimer = setTimeout(function() {
- $(opacityElsSelector).stop(true).animate({opacity: originalControlsOpacity}, 800);
- }, 2000)
- }, 100);
- });
+$(function() {
+ var activityTimer; waitForRest();
+ $(document).mousemove(waitForRest);
+
+ function atRest() {
+ $(document.body).addClass('at-rest')
+ }
+ function waitForRest() {
+ clearTimeout(activityTimer);
+ $(document.body).removeClass('at-rest')
+ activityTimer = setTimeout(atRest, 2500);
+ }
});
$(function() {
View
12 public/themes/base.scss
@@ -3,6 +3,8 @@
@import "compass/css3/transition";
@import "compass/css3/border-radius";
+$toolbar-rest-opacity: 0.4;
+
html { min-height: 100%; }
body { background-color: white; color: black; }
a { color: inherit; text-decoration: inherit; outline: 0; }
@@ -47,8 +49,6 @@ strong { font-weight: bolder; }
#template { display: none; }
-$defaultOpacity: 0.4;
-
#toolbar {
$w: 180px;
overflow: hidden;
@@ -66,7 +66,9 @@ $defaultOpacity: 0.4;
background-color: rgba(black, .1);
background-position: center;
background-repeat: no-repeat;
- opacity: $defaultOpacity;
+
+ @include single-transition(opacity, 500ms, ease-in-out);
+ body.at-rest & { opacity: $toolbar-rest-opacity; }
}
a.play {
width: 60px; height: 60px;
@@ -92,5 +94,7 @@ $defaultOpacity: 0.4;
position: absolute; bottom: 35px; right: 30px;
text-align: right;
min-width: 150px;
- a { opacity: $defaultOpacity; }
+
+ a { @include single-transition(opacity, 500ms, ease-in-out); }
+ body.at-rest & a { opacity: $toolbar-rest-opacity; }
}

0 comments on commit 0f38bad

Please sign in to comment.
Something went wrong with that request. Please try again.