nealnote/requestAnimationFrame.html

## requestAnimationFrame.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset='utf-8'>
<title> requestAnimationFrame </title>
<style type="text/css">
.mover {
  position: absolute;
  height: 100px;
  width: 100px;
  background-color: #27AE60;
}
</style>
</head>

<body>
<script type="text/javascript">
var rAF =  (function(){
  return window.requestAnimationFrame || function( callback ){
  window.setTimeout(callback, 1000/60)
  }
})();
for (var i = 0; i<50 ; i++ ){
  document.write("<div class='mover'></div>");
}
var movers = document.querySelectorAll('.mover');
(function(){
  for (var m = 0, l = movers.length; m < l ; m ++){
    movers[m].style.top = ( m * 20) + 'px';
  }
})();
function update(timestamp){
  if ( timestamp < 5000 ) {
    console.log( timestamp )
  }
  for (var m = 0, l = movers.length; m < l ; m ++){
    movers[m].style.left = (Math.sin(m + timestamp/1000) + 1) * 500 + 'px';
  }
  rAF(update);
}
rAF(update);
</script>
</body>
</html>
	<!DOCTYPE HTML>
	<html>
	<head>
	<meta charset='utf-8'>
	<title> requestAnimationFrame </title>
	<style type="text/css">
	.mover {
	position: absolute;
	height: 100px;
	width: 100px;
	background-color: #27AE60;
	}
	</style>
	</head>

	<body>
	<script type="text/javascript">
	var rAF = (function(){
	return window.requestAnimationFrame \|\| function( callback ){
	window.setTimeout(callback, 1000/60)
	}
	})();
	for (var i = 0; i<50 ; i++ ){
	document.write("<div class='mover'></div>");
	}
	var movers = document.querySelectorAll('.mover');
	(function(){
	for (var m = 0, l = movers.length; m < l ; m ++){
	movers[m].style.top = ( m * 20) + 'px';
	}
	})();
	function update(timestamp){
	if ( timestamp < 5000 ) {
	console.log( timestamp )
	}
	for (var m = 0, l = movers.length; m < l ; m ++){
	movers[m].style.left = (Math.sin(m + timestamp/1000) + 1) * 500 + 'px';
	}
	rAF(update);
	}
	rAF(update);
	</script>
	</body>
	</html>