Merge pull request #19 from Code52/tiles

Added tilt to tiles, via JS.
Code52 · Feb 13, 2012 · 22a8b8d · 22a8b8d
2 parents 0dab4f3 + c15a23d
commit 22a8b8d
Show file tree

Hide file tree

Showing 3 changed files with 84 additions and 7 deletions.
diff --git a/index.html b/index.html
@@ -8,6 +8,7 @@
 		<script src="/scripts/less-1.2.1.min.js" type="text/javascript"></script>
 		<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
 		<script type="text/javascript" src="/scripts/jquery.metro.js"></script>
+		<script type="text/javascript" src="/scripts/tilt.js"></script>
 	</head>
 	<body>
 		<a href="http://github.com/Code52/metro.css/">
@@ -105,11 +106,11 @@ <h4>tiles</h3>
 						<div class="tile one fifthcol tealbg"><a href="#"><h2>test</h2></a></div>
 					</div>	
 					<div class="tilerow">
-						<div class="tile one purplebg"><a href="#"><h2>test</h2></a></div>
-						<div class="tile one purplebg"><a href="#"><h2>test</h2></a></div>
-						<div class="tile one purplebg"><a href="#"><h2>test</h2></a></div>
-						<div class="tile one purplebg"><a href="#"><h2>test</h2></a></div>
-						<div class="tile one purplebg"><a href="#"><h2>test</h2></a></div>
+						<div class="tile one purplebg"><p><h2>test</h2></p></div>
+						<div class="tile one purplebg"><p><h2>test</h2></p></div>
+						<div class="tile one purplebg"><p><h2>test</h2></p></div>
+						<div class="tile one purplebg"><p><h2>test</h2></p></div>
+						<div class="tile one purplebg"><p><h2>test</h2></p></div>
 					</div>	
 				</div>
 			</div>
@@ -133,7 +134,14 @@ <h4>tiles</h3>
 
 			$(function () {
 				$("div.metro-pivot").metroPivot(defaults);
+
+
+				$(".tile").each(addTileTilt);
+
 			});
+
+
+
 		</script>
 	</body>
 </html>
diff --git a/less/tiles.less b/less/tiles.less
@@ -4,6 +4,9 @@
 @tilesize: (@tilepadding*2) + @tilebasewidth + @tilemargin;
 
 .tile {
+	-webkit-perspective: 0;
+	-webkit-transform-style: preserve-3d;
+	-webkit-transition: -webkit-transform 0.2s;
 	float: left;
 	margin-right: @tilemargin + 0px;
 	margin-bottom: @tilemargin + 0px;
@@ -13,6 +16,7 @@
 
 	h1, h2, h3, h4, h5, h6 { 
 		color: @white;
+		-webkit-user-select: none;
 	}
 
 	h2 { font-size: 1.75em; margin-top: 0px - @tilemargin; margin-left:0px; }
@@ -23,8 +27,13 @@
 
 .tile img { border :0;}
 .tile:hover { opacity:1;}
-.tiles { .clear;}
-.tilerow  { float:left; } 
+.tiles { .clear; }
+.tilerow  { 
+	float:left; 	
+	-webkit-perspective: 0;
+	-webkit-transform-style: preserve-3d;
+	-webkit-user-select: none; 
+} 
 .one {
 	width: @tilebasewidth + 0px;
 	height: @tilebasewidth + 0px;

diff --git a/scripts/tilt.js b/scripts/tilt.js
@@ -0,0 +1,60 @@
+/*
+	Base off Tim Holman's tile tilt: http://tholman.com/experiments/css3/metro-tiles/
+*/
+
+function addTileTilt()
+{
+	var tile = this;				
+	var mouse = {x: 0, y: 0, down: false};
+	var maxRotation = 16;
+
+	var setRotation = function(){
+		var width = tile.offsetWidth;
+		var height = tile.offsetHeight;
+		//Rotations as percentages
+		var yRotation = (mouse.x - (width / 2)) / (width / 2);
+		var xRotation = (mouse.y - (height / 2)) / (height / 2);
+
+		tile.style.webkitTransform = "rotateX("  + -xRotation * maxRotation + "deg)" +
+									" rotateY("  + yRotation * maxRotation + "deg)";
+
+		tile.style.mozTransform = "rotateX("  + -xRotation * maxRotation + "deg)" +
+									" rotateY("  + yRotation * maxRotation + "deg)";
+
+		tile.style.transform = "rotateX("  + -xRotation * maxRotation + "deg)" +
+									" rotateY("  + yRotation * maxRotation + "deg)";
+	}
+
+	var MouseDown = function(e){
+		mouse.x = e.offsetX;
+		mouse.y = e.offsetY;
+		mouse.down = true;
+		setRotation();
+	}
+
+	var MouseUp = function(e){
+		mouse.down = false;
+		tile.style.webkitTransform = "rotateX(0deg)" +
+									" rotateY(0deg)";
+
+		tile.style.mozTransform = "rotateX(0deg)" +
+								  " rotateY(0deg)";
+
+		tile.style.transform = "rotateX(0deg)" +
+							   " rotateY(0deg)";
+	}
+
+	var MouseMove = function(e){
+		mouse.x = e.offsetX;
+		mouse.y = e.offsetY;
+		if (mouse.down == true){
+			setRotation();
+		}
+	}
+
+
+	tile.addEventListener('mousemove', MouseMove, false);
+	tile.addEventListener('mousedown', MouseDown, false);
+	tile.addEventListener('mouseup', MouseUp, false);
+	tile.addEventListener('mouseout', MouseUp, false);
+}