i8degrees/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Touchpad pinch demo" />
  <meta charset="utf-8">
  <title>JS Bin</title>
<style id="jsbin-css">
http://experimental.mural.ly/vnext-mural/sticky/200/webglbody {
    -ms-scroll-rails: none;
}

#box {
  height: 100px;
  width: 100px;
  background-color: blue;
  -ms-scroll-rails: none;
}
</style>
</head>
<body>
  <p>Move the box around with your touchpad.<br>
    Works only in browsers that support the 'wheel' event (Chrome and IE).<br>
    Supports pinch-zoom in Chrome 36+ on Mac, and with most Windows touchpads.
  <p><input type=checkbox id=natural checked>My touchpad is configured for natural scrolling
  <div id=box></div>
<script id="jsbin-javascript">
var tx = 0;
var ty = 0;
var scale = 1;

document.addEventListener('wheel', function(e) {
  e.preventDefault();
  if (e.ctrlKey) {
    var s = Math.exp(-e.deltaY/100);
    scale *= s;
    console.log("delta = " + e.deltaY);
    console.log("scale = " + scale);
    console.log("s = " + s);

  } else {
    var direction = natural.checked ? -1 : 1;

    tx += e.deltaX * direction;
    ty += e.deltaY * direction;
  }
  var transform = 'translate(' + tx + 'px, ' + ty + 'px) scale(' + scale + ')';
  box.style.webkitTransform = transform;
  box.style.transform = transform;
});
</script>


<script id="jsbin-source-css" type="text/css">http://experimental.mural.ly/vnext-mural/sticky/200/webglbody {
    -ms-scroll-rails: none;
}

#box {
  height: 100px;
  width: 100px;
  background-color: blue;
  -ms-scroll-rails: none;
}</script>

<script id="jsbin-source-javascript" type="text/javascript">var tx = 0;
var ty = 0;
var scale = 1;

document.addEventListener('wheel', function(e) {
  e.preventDefault();
  if (e.ctrlKey) {
    var s = Math.exp(-e.deltaY/100);
    scale *= s;
    console.log("delta = " + e.deltaY);
    console.log("scale = " + scale);
    console.log("s = " + s);

  } else {
    var direction = natural.checked ? -1 : 1;

    tx += e.deltaX * direction;
    ty += e.deltaY * direction;
  }
  var transform = 'translate(' + tx + 'px, ' + ty + 'px) scale(' + scale + ')';
  box.style.webkitTransform = transform;
  box.style.transform = transform;
});</script></body>
</html>

## jsbin.lotolelele.css
http://experimental.mural.ly/vnext-mural/sticky/200/webglbody {
    -ms-scroll-rails: none;
}

#box {
  height: 100px;
  width: 100px;
  background-color: blue;
  -ms-scroll-rails: none;
}

## jsbin.lotolelele.js
var tx = 0;
var ty = 0;
var scale = 1;

document.addEventListener('wheel', function(e) {
  e.preventDefault();
  if (e.ctrlKey) {
    var s = Math.exp(-e.deltaY/100);
    scale *= s;
    console.log("delta = " + e.deltaY);
    console.log("scale = " + scale);
    console.log("s = " + s);

  } else {
    var direction = natural.checked ? -1 : 1;

    tx += e.deltaX * direction;
    ty += e.deltaY * direction;
  }
  var transform = 'translate(' + tx + 'px, ' + ty + 'px) scale(' + scale + ')';
  box.style.webkitTransform = transform;
  box.style.transform = transform;
});
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="description" content="Touchpad pinch demo" />
	<meta charset="utf-8">
	<title>JS Bin</title>
	<style id="jsbin-css">
	http://experimental.mural.ly/vnext-mural/sticky/200/webglbody {
	-ms-scroll-rails: none;
	}

	#box {
	height: 100px;
	width: 100px;
	background-color: blue;
	-ms-scroll-rails: none;
	}
	</style>
	</head>
	<body>
	<p>Move the box around with your touchpad.<br>
	Works only in browsers that support the 'wheel' event (Chrome and IE).<br>
	Supports pinch-zoom in Chrome 36+ on Mac, and with most Windows touchpads.
	<p><input type=checkbox id=natural checked>My touchpad is configured for natural scrolling
	<div id=box></div>
	<script id="jsbin-javascript">
	var tx = 0;
	var ty = 0;
	var scale = 1;

	document.addEventListener('wheel', function(e) {
	e.preventDefault();
	if (e.ctrlKey) {
	var s = Math.exp(-e.deltaY/100);
	scale *= s;
	console.log("delta = " + e.deltaY);
	console.log("scale = " + scale);
	console.log("s = " + s);

	} else {
	var direction = natural.checked ? -1 : 1;

	tx += e.deltaX * direction;
	ty += e.deltaY * direction;
	}
	var transform = 'translate(' + tx + 'px, ' + ty + 'px) scale(' + scale + ')';
	box.style.webkitTransform = transform;
	box.style.transform = transform;
	});
	</script>


	<script id="jsbin-source-css" type="text/css">http://experimental.mural.ly/vnext-mural/sticky/200/webglbody {
	-ms-scroll-rails: none;
	}

	#box {
	height: 100px;
	width: 100px;
	background-color: blue;
	-ms-scroll-rails: none;
	}</script>

	<script id="jsbin-source-javascript" type="text/javascript">var tx = 0;
	var ty = 0;
	var scale = 1;

	document.addEventListener('wheel', function(e) {
	e.preventDefault();
	if (e.ctrlKey) {
	var s = Math.exp(-e.deltaY/100);
	scale *= s;
	console.log("delta = " + e.deltaY);
	console.log("scale = " + scale);
	console.log("s = " + s);

	} else {
	var direction = natural.checked ? -1 : 1;

	tx += e.deltaX * direction;
	ty += e.deltaY * direction;
	}
	var transform = 'translate(' + tx + 'px, ' + ty + 'px) scale(' + scale + ')';
	box.style.webkitTransform = transform;
	box.style.transform = transform;
	});</script></body>
	</html>