From c15a23d924c9b5b17baab4717c01335a13f86053 Mon Sep 17 00:00:00 2001 From: aeoth Date: Mon, 13 Feb 2012 15:27:54 +1100 Subject: [PATCH] Added tilt to tiles, via JS. --- index.html | 18 ++++++++++----- less/tiles.less | 13 +++++++++-- scripts/tilt.js | 60 +++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 84 insertions(+), 7 deletions(-) create mode 100644 scripts/tilt.js diff --git a/index.html b/index.html index 09f40aa..f8af3e4 100644 --- a/index.html +++ b/index.html @@ -8,6 +8,7 @@ + @@ -105,11 +106,11 @@

tiles

test

-

test

-

test

-

test

-

test

-

test

+

test

+

test

+

test

+

test

+

test

@@ -133,7 +134,14 @@

tiles

$(function () { $("div.metro-pivot").metroPivot(defaults); + + + $(".tile").each(addTileTilt); + }); + + + \ No newline at end of file diff --git a/less/tiles.less b/less/tiles.less index 6e8fbe7..113057a 100644 --- 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 new file mode 100644 index 0000000..c63d68e --- /dev/null +++ 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); +} \ No newline at end of file