Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Fade controls in/out on mousemove

  • Loading branch information...
commit 4fd3c64f7071852a8a4074c142246316f66100b1 1 parent 595ae67
Per Thulin authored
Showing with 37 additions and 0 deletions.
  1. +9 −0 html/index.html
  2. +28 −0 static/main.js
View
9 html/index.html
@@ -17,8 +17,17 @@
margin-top: 50px;
}
.controls {
+ position: fixed;
+ width: 100%;
+ top: 0;
text-align: center;
padding: 5px;
+ background: black;
+ color: white;
+ opacity: 0;
+ -moz-transition: opacity 0.5s;
+ -webkit-transition: opacity 0.5s;
+ -o-transition: opacity 0.5s;
}
</style>
</head>
View
28 static/main.js
@@ -1,5 +1,7 @@
var initialPopStateHasRun = false;
+var controlsTimeoutTimer;
var hasLoaded = false;
+var hasRendered = false;
var biggestNum = 0;
var WIDTH = window.innerWidth;
var HEIGHT = window.innerHeight;
@@ -7,6 +9,7 @@ var global = {};
var countries = {};
var words = [];
var progressCounter = 0;
+var $controls = document.querySelector('.controls');
var $cloud = document.querySelector('.cloud');
var $progress = document.querySelector('.progress');
var $country = document.querySelector('select.country');
@@ -82,6 +85,7 @@ function progress(word) {
function loadLayout() {
$progress.style.display = "block";
$cloud.innerHTML = '';
+ hasRendered = false;
var fontSize = d3.scale.log().range([10, 100]);
@@ -122,6 +126,9 @@ function draw(words) {
return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
})
.text(function(d) { return d.text; });
+
+ hasRendered = true;
+ fadeAwayControls();
}
function getData(callback) {
@@ -169,6 +176,7 @@ function run() {
hasLoaded = true;
parseData(json);
setupCountryChooser();
+ showControls();
run();
});
return;
@@ -184,6 +192,26 @@ function run() {
loadLayout();
}
+function showControls () {
+ $controls.style.opacity = '1';
+}
+
+function fadeAwayControls() {
+ if (controlsTimeoutTimer) {
+ clearTimeout(controlsTimeoutTimer);
+ }
+ controlsTimeoutTimer = setTimeout(function() {
+ $controls.style.opacity = '0';
+ }, 3000);
+}
+
+window.onmousemove = function() {
+ if (hasRendered) {
+ showControls();
+ fadeAwayControls();
+ }
+};
+
window.addEventListener('popstate', function(event) {
// Chrome throws an initial popState, http://dropshado.ws/post/15251622664/ignore-initial-popstate
var isChrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
Please sign in to comment.
Something went wrong with that request. Please try again.