Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Added tilt to tiles, via JS.

  • Loading branch information...
commit c15a23d924c9b5b17baab4717c01335a13f86053 1 parent 5513e2b
aeoth authored
Showing with 84 additions and 7 deletions.
  1. +13 −5 index.html
  2. +11 −2 less/tiles.less
  3. +60 −0 scripts/tilt.js
View
18 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 @@ <h2 class="lime">stylesheets and then some</h2>
<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 @@ <h2 class="lime">stylesheets and then some</h2>
$(function () {
$("div.metro-pivot").metroPivot(defaults);
+
+
+ $(".tile").each(addTileTilt);
+
});
+
+
+
</script>
</body>
</html>
View
13 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;
View
60 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);
+}
Please sign in to comment.
Something went wrong with that request. Please try again.