thomd/javascript-animations.html

## javascript-animations.html
<!DOCTYPE html>
<html>
<head>
<title>basic javascript-animations</title>
<style>
  .boxes div{position:absolute;left:0px;width:100px;height:100px;background:#F00;}
  #box1{top:100px;}
  #box2{top:250px;}
  #box3{top:400px;}
  #box4{top:550px;}
  footer{position:absolute;bottom:0;}
</style>
</head>

<body>
  <p>No Animation for box1!</p>
  <p>JavaScript and the browser rendering engine share a single thread of execution! While the code is running, no rendering will happen.</p>
  <div class="boxes">
	<div id="box1">box1</div>
	<div id="box2">box2</div>
	<div id="box3">box3</div>
	<div id="box4">box4</div>
  </div>
  <footer><p>based on http://fronteers.nl/congres/2009/sessions/roll-your-own-effects-framework</p></footer>

  <script type="text/javascript">
    (function(){
      var box = document.getElementById('box1');
      for(var i = 0; i < 1000; i++){
        box.style.left = i + 'px';
      }
    })();

    (function(){
      var box = document.getElementById('box2');
      var i = 0;
      var interval = setInterval(function(){
        i += 2;
        box.style.left = i + 'px';
        if(i > 1000) clearInterval(interval);
      }, 10);
    })();

    (function(){
      var box = document.getElementById('box3');
      var start = (new Date).getTime(), duration = 5000, end = start + duration;
      var interval = setInterval(function(){
        var time = (new Date).getTime(),
            pos = time>end ? 1 : (time-start)/duration;
        box.style.left = (1000*pos) + 'px';
        if(time>end) clearInterval(interval);
      }, 10);
    })();

    (function(){
      var easing = function(pos){
        return (-Math.cos(pos*Math.PI)/2)+0.5;
      }
      var bounce = function(pos){
        if(pos < (1/2.75)){
          return (7.5625*pos*pos);
        } else if(pos < (2 / 2.75)){
          return (7.5625 * (pos -= (1.5 / 2.75)) * pos + .75);
        } else if(pos < (2.5 / 2.75)){
          return (7.5625 * (pos -= (2.25 / 2.75)) * pos + .9375);
        } else {
          return (7.5625 * (pos -= (2.625 / 2.75)) * pos + .984375);
        }
      }
      var box = document.getElementById('box4');
      var start = (new Date).getTime(), duration = 5000, end = start + duration;
      var interval = setInterval(function(){
        var time = (new Date).getTime(),
            pos = time>end ? 1 : (time-start)/duration;
        box.style.left = (1000*bounce(pos)) + 'px';
        if(time>end) clearInterval(interval);
      }, 10);
    })();
  </script>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>basic javascript-animations</title>
	<style>
	.boxes div{position:absolute;left:0px;width:100px;height:100px;background:#F00;}
	#box1{top:100px;}
	#box2{top:250px;}
	#box3{top:400px;}
	#box4{top:550px;}
	footer{position:absolute;bottom:0;}
	</style>
	</head>

	<body>
	<p>No Animation for box1!</p>
	<p>JavaScript and the browser rendering engine share a single thread of execution! While the code is running, no rendering will happen.</p>
	<div class="boxes">
	<div id="box1">box1</div>
	<div id="box2">box2</div>
	<div id="box3">box3</div>
	<div id="box4">box4</div>
	</div>
	<footer><p>based on http://fronteers.nl/congres/2009/sessions/roll-your-own-effects-framework</p></footer>

	<script type="text/javascript">
	(function(){
	var box = document.getElementById('box1');
	for(var i = 0; i < 1000; i++){
	box.style.left = i + 'px';
	}
	})();

	(function(){
	var box = document.getElementById('box2');
	var i = 0;
	var interval = setInterval(function(){
	i += 2;
	box.style.left = i + 'px';
	if(i > 1000) clearInterval(interval);
	}, 10);
	})();

	(function(){
	var box = document.getElementById('box3');
	var start = (new Date).getTime(), duration = 5000, end = start + duration;
	var interval = setInterval(function(){
	var time = (new Date).getTime(),
	pos = time>end ? 1 : (time-start)/duration;
	box.style.left = (1000*pos) + 'px';
	if(time>end) clearInterval(interval);
	}, 10);
	})();

	(function(){
	var easing = function(pos){
	return (-Math.cos(pos*Math.PI)/2)+0.5;
	}
	var bounce = function(pos){
	if(pos < (1/2.75)){
	return (7.5625pospos);
	} else if(pos < (2 / 2.75)){
	return (7.5625 * (pos -= (1.5 / 2.75)) * pos + .75);
	} else if(pos < (2.5 / 2.75)){
	return (7.5625 * (pos -= (2.25 / 2.75)) * pos + .9375);
	} else {
	return (7.5625 * (pos -= (2.625 / 2.75)) * pos + .984375);
	}
	}
	var box = document.getElementById('box4');
	var start = (new Date).getTime(), duration = 5000, end = start + duration;
	var interval = setInterval(function(){
	var time = (new Date).getTime(),
	pos = time>end ? 1 : (time-start)/duration;
	box.style.left = (1000*bounce(pos)) + 'px';
	if(time>end) clearInterval(interval);
	}, 10);
	})();
	</script>

	</body>
	</html>