Skip to content

Instantly share code, notes, and snippets.

@darsain

darsain/boxes.html

Created November 17, 2013 09:21
Show Gist options
  • Save darsain/7511199 to your computer and use it in GitHub Desktop.
Save darsain/7511199 to your computer and use it in GitHub Desktop.
Download ZIP
Testing mouse lag & overall responsiveness.
Raw
boxes.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<style>
html, body {margin: 0; padding: 0; height: 100%; text-align: center; font-family: sans-serif;}
ul {position: absolute; width: 100%; height: 100%; list-style: none; margin: 0; padding: 0;}
ul li {float: left; width: 10%; height: 10%; background: #eee; box-shadow: -1px -1px 0 rgba(0,0,0,.2);}
ul li:hover {background: #f78;}
.info {width: 200px; margin: 0 auto; padding: 1px 0 1em 0; pointer-events: none; opacity: .5; background: #fab;}
.info.active {background: #afb;}
</style>
</head>
<body>
<ul>
<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
</ul>
<div class="info">
<h4>RAF loop: <span class="state">inactive</span></h4>
<em>(click anywhere to toggle)</em>
</div>
<script>
var info = document.querySelector('.info');
var state = info.querySelector('.state');
var frameID;
// Pause/Play when clicking on document
document.addEventListener('click', function () {
if (frameID) {
frameID = cancelAnimationFrame(frameID);
} else {
render();
}
info.classList[frameID ? 'add' : 'remove']('active');
state.textContent = frameID ? 'active' : 'inactive';
});
// Frame renderer
function render() {
frameID = requestAnimationFrame(render);
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment