Skip to content

Instantly share code, notes, and snippets.

@mariiinda

mariiinda/raf-counter.html

Created May 13, 2013 21:42
Show Gist options
  • Save mariiinda/5571776 to your computer and use it in GitHub Desktop.
Save mariiinda/5571776 to your computer and use it in GitHub Desktop.
Download ZIP
requestAnimationFrame counter
Raw
raf-counter.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>RAF count</title>
<link href='http://fonts.googleapis.com/css?family=Plaster' rel='stylesheet' type='text/css'>
<style type="text/css">
* {
margin: 0;
padding: 0;
font-size: 15px;
font-family: helvetica, arial, sans-serif
}
body {
background: silver;
}
.percent {
font-family: 'Plaster', cursive;
font-size: 72px;
position: absolute;
top:45%;
left:45%;
color: #666;
}
</style>
</head>
<body>
<section class="percent">0</section>
<script type="text/javascript">
var percentEl = document.querySelector('.percent');
var start = percentEl.innerHTML;
var max = 100;
function animate() {
if (percentEl.innerHTML < 100) {
percentEl.innerHTML++;
} else {
return;
}
}
// shim layer with setTimeout fallback
window.requestAnimFrame = (function () {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function (callback) {
window.setTimeout(callback, 1000 / 30);
};
})();
var fps = 30;
(function draw() {
setTimeout(function() {
requestAnimFrame(draw);
animate();
}, 500 / fps);
})();
</script></body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment