Skip to content
Browse files

spin the book around

  • Loading branch information...
1 parent 18aff92 commit 7dfecb0cd74ccfc36917ae8568d6b3bf7f135b28 @kig committed Jun 30, 2012
Showing with 39 additions and 21 deletions.
  1. +34 −16 book.js
  2. +5 −5 index.html
View
50 book.js
@@ -32,12 +32,41 @@ for (var i = 0; i < books.length; i++) {
})();
(function() {
-var sx,sy,down,rot=0;
+var px,py,sx,sy,down,rot=0,rotX=0,rotY=0,cancel;
var cardPage = document.querySelector('#myBook > div');
var pages = document.querySelectorAll('#myBook > div > div');
var currentPage = 0;
window.onmousedown = function(ev) {
+ down = true;
+ cancel = false;
+ sx = px = ev.clientX;
+ sy = py = ev.clientY;
+ ev.preventDefault();
+};
+
+window.onmouseup = function(ev) {
+ down = false;
+};
+
+window.onmousemove = function(ev) {
+ if (down) {
+ var x = ev.clientX;
+ var y = ev.clientY;
+ var dx = x-px;
+ var dy = y-py;
+ px = x;
+ py = y;
+ cancel = cancel || ((x-sx)*(x-sx)+(y-sy)*(y-sy) > 25);
+ rotX -= dy * 1;
+ rotY -= dx * 1;
+ setTransform(cardPage, 'rotateX('+rotX+'deg) rotateY('+rotY+'deg)');
+ ev.preventDefault();
+ }
+};
+
+window.onclick = function(ev) {
+ if (cancel) return;
if (ev.clientX < 600) {
previousPage();
} else {
@@ -63,25 +92,14 @@ return;
/* deprecated draggable page-turner
-window.onmousedown = function(ev) {
- down = true;
- sx = ev.clientX;
- sy = ev.clientY;
- ev.preventDefault();
-};
-
-window.onmouseup = function(ev) {
- down = false;
-};
-
window.onmousemove = function(ev) {
if (down) {
var x = ev.clientX;
var y = ev.clientY;
- var dx = x-sx;
- var dy = y-sy;
- sx = x;
- sy = y;
+ var dx = x-px;
+ var dy = y-py;
+ px = x;
+ py = y;
rot = Math.min(0, Math.max(-150, rot+dx*2));
var p = ((rot / -150)) * 2 * currentPage + -currentPage;
setTransform(pages[currentPage], 'translate3d(0px,0px,'+p+'px) rotateY('+ rot + 'deg)');
View
10 index.html
@@ -83,11 +83,11 @@
height: 600px;
position: absolute;
overflow: hidden;
- -webkit-transform: translate3d(0px, 0px, 0.01px);
- -moz-transform: translate3d(0px, 0px, 0.01px);
- -ms-transform: translate3d(0px, 0px, 0.01px);
- -o-transform: translate3d(0px, 0px, 0.01px);
- transform: translate3d(0px, 0px, 0.01px);
+ -webkit-transform: translate3d(0px, 0px, 0.02px);
+ -moz-transform: translate3d(0px, 0px, 0.02px);
+ -ms-transform: translate3d(0px, 0px, 0.02px);
+ -o-transform: translate3d(0px, 0px, 0.02px);
+ transform: translate3d(0px, 0px, 0.02px);
padding: 30px;
padding-left: 40px;
padding-bottom: 80px;

0 comments on commit 7dfecb0

Please sign in to comment.
Something went wrong with that request. Please try again.