tomhodgins/touches.html

## touches.html
<!DOCTYPE html>
<html>
<head>
  <meta charset=utf-8>
  <meta name=viewport content="width=device-width, initial-scale=1, user-scalable=no">
  <title>Multitouch Support</title>
  <style>
    * {
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
    }
    html, body {
      -webkit-text-size-adjust: 100%;
      width: 100%;
      height: 100%;
      margin: 0;
      font-family: sans-serif;
      color: #333;
      background: #333;
      position: fixed;
    }
    div {
      position: absolute;
      display: block;
      width: 0;
      height: 0;
      border-radius: 100%;
      background: yellow;
      opacity: 1;
      transition: opacity 1s ease-in-out,
                  width .25s ease-in-out,
                  height .25s ease-in-out;
    }
  </style>
<head>
<body>
  Multitouch Support
  <script>
    window.addEventListener('touchstart',begin)
    function begin(e){
      e.preventDefault()
      for (i=0;i<e.touches.length;i++){
        var dot = document.createElement('div');
        dot.id = i
        dot.style.top = e.touches[i].clientY+15+'px'
        dot.style.left = e.touches[i].clientX+15+'px'
        document.body.appendChild(dot)
      }
    }
    window.addEventListener('touchmove',move)
    function move(e){
      for (i=0;i<e.touches.length;i++){
        var dot = document.getElementById(i);
        dot.style.top = e.changedTouches[i].clientY-15+'px'
        dot.style.left = e.changedTouches[i].clientX-15+'px'
        dot.style.width = 30+'px'
        dot.style.height = 30+'px'
      }
    }
    window.addEventListener('touchend',tidy)
    function tidy(e){
      var dots = document.querySelectorAll('div');
      for (i=0;i<dots.length;i++){
        var random = Math.random()*5;
        dots[i].id = random
        dots[i].style.opacity = 0
        dots[i].style.width = 0
        dots[i].style.height = 0
        clean(random)
      }
    }
    function clean(id){
      setTimeout(function(){document.body.removeChild(document.getElementById(id))},2000)
    }
  </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset=utf-8>
	<meta name=viewport content="width=device-width, initial-scale=1, user-scalable=no">
	<title>Multitouch Support</title>
	<style>
	* {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	}
	html, body {
	-webkit-text-size-adjust: 100%;
	width: 100%;
	height: 100%;
	margin: 0;
	font-family: sans-serif;
	color: #333;
	background: #333;
	position: fixed;
	}
	div {
	position: absolute;
	display: block;
	width: 0;
	height: 0;
	border-radius: 100%;
	background: yellow;
	opacity: 1;
	transition: opacity 1s ease-in-out,
	width .25s ease-in-out,
	height .25s ease-in-out;
	}
	</style>
	<head>
	<body>
	Multitouch Support
	<script>
	window.addEventListener('touchstart',begin)
	function begin(e){
	e.preventDefault()
	for (i=0;i<e.touches.length;i++){
	var dot = document.createElement('div');
	dot.id = i
	dot.style.top = e.touches[i].clientY+15+'px'
	dot.style.left = e.touches[i].clientX+15+'px'
	document.body.appendChild(dot)
	}
	}
	window.addEventListener('touchmove',move)
	function move(e){
	for (i=0;i<e.touches.length;i++){
	var dot = document.getElementById(i);
	dot.style.top = e.changedTouches[i].clientY-15+'px'
	dot.style.left = e.changedTouches[i].clientX-15+'px'
	dot.style.width = 30+'px'
	dot.style.height = 30+'px'
	}
	}
	window.addEventListener('touchend',tidy)
	function tidy(e){
	var dots = document.querySelectorAll('div');
	for (i=0;i<dots.length;i++){
	var random = Math.random()*5;
	dots[i].id = random
	dots[i].style.opacity = 0
	dots[i].style.width = 0
	dots[i].style.height = 0
	clean(random)
	}
	}
	function clean(id){
	setTimeout(function(){document.body.removeChild(document.getElementById(id))},2000)
	}
	</script>
	</body>
	</html>