vpj/README.md

## README.md

      
    Raw
  

              README.md
            
          
    TopLeft vs webkitTransform

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
 #view {
  position: relative;
  height: 400px;
  width: 962px;
  background: #eee;
  overflow: hidden;
 }
 #content {
  position: relative;
  top: 0px;
  left: 0px;
  width: 2000px;
  height: 2000px;
 }
 .box {
  position: absolute;
  width: 40px;
  height: 40px;
  background: rgba(255, 50, 50, 0.1);
  border: 1px solid rgba(200, 200, 200, 0.3);
 }
</style>
<body>
 <div id="view">
  <div id="content">
  </div>
 </div>
 <select id="move">
  <option value="topLeft">Position:Top/Left</option>
  <option value="matrix">Transform:Matrix</option>
  <option value="matrix3d">Transform:Matrix3d</option>
 </select>


 <script type="text/javascript" src="//rawgit.com/vpj/weya/master/weya.js"></script>
 <script>
// Generated by CoffeeScript 1.7.1
(function() {
  var Ax, Ay, T, X, Y, elem, move, select, setPosition, template, transform, updatePosition;

  template = function() {
    var i, _i, _results;
    _results = [];
    for (i = _i = 0; _i < 10000; i = ++_i) {
      _results.push(this.div(".box", {
        style: {
          top: "" + (parseInt(2000 * Math.random())) + "px",
          left: "" + (parseInt(2000 * Math.random())) + "px"
        }
      }));
    }
    return _results;
  };

  elem = document.getElementById("content");

  Weya({
    elem: elem
  }, template);

  Ax = 0.002;

  Ay = 0.001;

  X = 0;

  Y = 0;

  T = (new Date).getTime();

  transform = {
    topLeft: function() {
      elem.style.top = "" + (parseInt(Y)) + "px";
      return elem.style.left = "" + (parseInt(X)) + "px";
    },
    matrix: function() {
      return elem.style.webkitTransform = "matrix(1, 0, 0, 1, " + X + ", " + Y + ")";
    },
    matrix3d: function() {
      return elem.style.webkitTransform = "matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, " + X + ", " + Y + ", 0, 1)";
    }
  };

  move = function() {
    setPosition();
    updatePosition();
    return window.requestAnimationFrame(move);
  };

  updatePosition = function() {
    var t;
    t = (new Date).getTime() - T;
    X = 100 * (-1 + Math.sin(Ax * t));
    return Y = 100 * (-1 + Math.sin(Ay * t));
  };

  setPosition = transform.topLeft;

  select = document.getElementById('move');

  select.addEventListener('change', function(e) {
    return setPosition = transform[select.value];
  });

  window.requestAnimationFrame(move);

}).call(this);
</script>
</body>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>
	#view {
	position: relative;
	height: 400px;
	width: 962px;
	background: #eee;
	overflow: hidden;
	}
	#content {
	position: relative;
	top: 0px;
	left: 0px;
	width: 2000px;
	height: 2000px;
	}
	.box {
	position: absolute;
	width: 40px;
	height: 40px;
	background: rgba(255, 50, 50, 0.1);
	border: 1px solid rgba(200, 200, 200, 0.3);
	}
	</style>
	<body>
	<div id="view">
	<div id="content">
	</div>
	</div>
	<select id="move">
	<option value="topLeft">Position:Top/Left</option>
	<option value="matrix">Transform:Matrix</option>
	<option value="matrix3d">Transform:Matrix3d</option>
	</select>


	<script type="text/javascript" src="//rawgit.com/vpj/weya/master/weya.js"></script>
	<script>
	// Generated by CoffeeScript 1.7.1
	(function() {
	var Ax, Ay, T, X, Y, elem, move, select, setPosition, template, transform, updatePosition;

	template = function() {
	var i, _i, _results;
	_results = [];
	for (i = _i = 0; _i < 10000; i = ++_i) {
	_results.push(this.div(".box", {
	style: {
	top: "" + (parseInt(2000 * Math.random())) + "px",
	left: "" + (parseInt(2000 * Math.random())) + "px"
	}
	}));
	}
	return _results;
	};

	elem = document.getElementById("content");

	Weya({
	elem: elem
	}, template);

	Ax = 0.002;

	Ay = 0.001;

	X = 0;

	Y = 0;

	T = (new Date).getTime();

	transform = {
	topLeft: function() {
	elem.style.top = "" + (parseInt(Y)) + "px";
	return elem.style.left = "" + (parseInt(X)) + "px";
	},
	matrix: function() {
	return elem.style.webkitTransform = "matrix(1, 0, 0, 1, " + X + ", " + Y + ")";
	},
	matrix3d: function() {
	return elem.style.webkitTransform = "matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, " + X + ", " + Y + ", 0, 1)";
	}
	};

	move = function() {
	setPosition();
	updatePosition();
	return window.requestAnimationFrame(move);
	};

	updatePosition = function() {
	var t;
	t = (new Date).getTime() - T;
	X = 100 * (-1 + Math.sin(Ax * t));
	return Y = 100 * (-1 + Math.sin(Ay * t));
	};

	setPosition = transform.topLeft;

	select = document.getElementById('move');

	select.addEventListener('change', function(e) {
	return setPosition = transform[select.value];
	});

	window.requestAnimationFrame(move);

	}).call(this);
	</script>
	</body>