Skip to content

Instantly share code, notes, and snippets.

@nulltask

nulltask/20110524_prototype.html

Created May 24, 2011 02:43
Show Gist options
  • Save nulltask/988057 to your computer and use it in GitHub Desktop.
Save nulltask/988057 to your computer and use it in GitHub Desktop.
Download ZIP
20110524_prototype
Raw
20110524_prototype.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>20110524_prototype</title>
<link rel="stylesheet" href="http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css">
<link rel="stylesheet" href="style.css">
<script src="http://visionmedia.github.com/move.js/move.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.js"></script>
<!-- script src="http://labs.skinkers.com/touchSwipe/demo/js/jquery.touchSwipe-1.2.3.js"></script -->
<script src="http://plugins.jquery.com/files/jquery.touchSwipe-1.2.4.js_.txt"></script>
<script src="https://github.com/jeresig/jquery.hotkeys/raw/master/jquery.hotkeys.js"></script>
<script src="site.js"></script>
</head>
<body>
<div id="debug">
<p>clientX: <span id="clientX"></span></p>
<p>clientY: <span id="clientY"></span></p>
<p>rad: <span id="rad"></span></p>
</div>
<div id="wrapper" class="window-height">
<div id="container" class="window-height">
<ul class="window-height">
<li class="col window-height">
<ul class="row window-height">
<li class="page window-height" data-page-url="./test1.html">1</li>
<li class="page window-height" data-page-url="./test2.html">2</li>
<li class="page window-height" data-page-url="./test3.html">3</li>
<li class="page window-height" data-page-url="./test4.html">4</li>
</ul>
</li>
<li class="col window-height">
<ul class="row window-height">
<li class="page window-height" data-page-url="./test4.html">4</li>
<li class="page window-height" data-page-url="./test3.html">3</li>
<li class="page window-height" data-page-url="./test2.html">2</li>
<li class="page window-height" data-page-url="./test1.html">1</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
Raw
site.js
(function(window, document, undefined) {
var $window = jQuery(window),
$document = jQuery(document);
jQuery(function($) {
var $container = $("#container"),
contentWidth = 0,
contentHeight = 0,
maxRow = -1, maxCol = -1,
curPos = {
row: 0,
col: 0
}
;
// load external contents
$("li.page").each(function(i, n) {
var $this = $(this);
var url = $(this).data("page-url");
var jqxhr = $.ajax({
url: url,
dataType: "html"
})
.success(function(data) {
var $data = $(data);
$data.find("#ajaxContent").children().appendTo($this);
})
.error(function() {
})
.complete(function() {
});
});
function scroll(distance, duration) {
console.log(distance);
console.log(duration);
$container.css("-webkit-transition-duration", (duration / 1000).toFixed(1) + "s");
var x = (distance < 0 ? "" : "-") + Math.abs(distance).toString();
var y = 0;
$container.css("-webkit-transform", "translate3d("+ x +"px, " + y + "px, 0px)");
}
function slide() {
$container
.css("-webkit-transform", "translate3d(" + ($document.width() * -curPos.col) + "px," + $window.height() * -curPos.row + "px, 0px)")
.css("-moz-transform", "translate(" + ($document.width() * -curPos.col) + "px, " + $window.height() * -curPos.row + "px)");
}
var swipeStatus = {
move: function(event, phase, direction, distance) {
var duration = 0;
if (direction == "left") {
scroll((contentWidth * curPos.col) + distance, duration);
}
else if (direction == "right") {
scroll((contentWidth * curPos.col) - distance, duration);
}
},
cancel: function(event, phase, direction, distance) {
$container.css("-webkit-transition-duration", "0.5s");
},
end: function(event, phase, direction, distance) {
$container.css("-webkit-transition-duration", "0.5s");
}
};
$window
.bind("resize", function(event) {
contentWidth = $document.width();
contentHeight = $window.height();
var params = {
width: contentWidth,
height: contentHeight
};
$(".page").css(params);
$(".col").css(params);
$(".row").css(params);
$(".col").each(function(i, n) {
$(this).css("left", params.width * i);
$(this).find(".row").each(function(i, n) {
$(this).find(".page").each(function(i, n) {
$(this).css("top", params.height * i);
maxRow = Math.max(i, maxRow);
});
});
maxCol = Math.max(i, maxCol);
});
})
.trigger("resize")
.mousemove(function(event) {
// console.log(event);
var halfWidth = contentWidth / 2;
var halfHeight = contentHeight / 2;
$("#clientX").text(event.clientX - halfWidth);
$("#clientY").text(event.clientY - halfHeight);
var atan = Math.atan2(event.clientY - halfHeight, event.clientX - halfWidth) + (Math.PI / 8);
if (atan < Math.atan2(-halfHeight, -halfWidth) + (Math.PI / 8)) {
$("#rad").text("←");
}
else if (atan < Math.atan2(-halfHeight, halfWidth) + (Math.PI / 8)) {
$("#rad").text("↑");
}
else if (atan < Math.atan2(halfHeight, halfWidth) + (Math.PI / 8)) {
$("#rad").text("→");
}
else {
$("#rad").text("↓");
}
});
$container
.bind("movetop", function(event) {
$("#rad").text("↑!");
if (--curPos.row < 0) {
curPos.row = 0;
}
slide();
})
.bind("moveright", function(event) {
$("#rad").text("→!");
if (++curPos.col >= maxCol) {
curPos.col = maxCol;
}
slide();
})
.bind("movebottom", function(event) {
$("#rad").text("↓!");
if (++curPos.row >= maxRow) {
curPos.row = maxRow;
}
slide();
})
.bind("moveleft", function(event) {
$("#rad").text("←!");
if (--curPos.col < 0) {
curPos.col = 0;
}
slide();
});
$container.swipe({
swipeLeft: function(event) {
$container.trigger("moveright");
},
swipeRight: function(event) {
$container.trigger("moveleft");
},
swipeUp: function(event) {
$container.trigger("movebottom");
},
swipeDown: function(event) {
$container.trigger("movetop");
},
swipeStatus: function(event, phase, direction, distance) {
if (swipeStatus[phase]) {
swipeStatus[phase](event, phase, direction, distance);
}
}
});
$("body").click(function(event) {
var halfWidth = $document.width() / 2;
var halfHeight = $window.height() / 2;
$("#clientX").text(event.clientX - halfWidth);
$("#clientY").text(event.clientY - halfHeight);
var atan = Math.atan2(event.clientY - halfHeight, event.clientX - halfWidth) + (Math.PI / 8);
if (atan < Math.atan2(-halfHeight, -halfWidth) + (Math.PI / 8)) {
$("#rad").text("←");
$container.trigger("moveleft");
}
else if (atan < Math.atan2(-halfHeight, halfWidth) + (Math.PI / 8)) {
$("#rad").text("↑");
$container.trigger("movetop");
}
else if (atan < Math.atan2(halfHeight, halfWidth) + (Math.PI / 8)) {
$("#rad").text("→");
$container.trigger("moveright");
}
else {
$("#rad").text("↓");
$container.trigger("movebottom");
}
});
$document
.bind("keydown", "up", function(event) {
$container.trigger("movetop");
})
.bind("keydown", "right", function(event) {
$container.trigger("moveright");
})
.bind("keydown", "down", function(event) {
$container.trigger("movebottom");
})
.bind("keydown", "left", function(event) {
$container.trigger("moveleft");
})
});
})(window, document);
Raw
style.css
html {
height: 100%;
}
body {
height: 100%;
overflow: hidden;
background-color: lightgray;
}
.window-height {
height: 100%;
}
.page {
position: absolute;
top: 0; left: 0;
background-color: white;
}
.col {
position: absolute;
}
.row {
position: relative;
}
#wrapper {
overflow: hidden;
background-size: 100%;
-webkit-transition-property: background-position;
-webkit-transition-duration: 0.5s;
-webkit-transition-timing-function: ease-out;
-moz-transition-property: background-position;
-moz-transition-duration: 0.5s;
-moz-transition-timing-function: ease-out;
}
#container {
-webkit-transition-property: -webkit-transform;
-webkit-transition-duration: 0.5s;
-webkit-transition-timing-function: ease-out;
-webkit-transform: translate3d(0px, 0px, 0px);
-moz-transition-property: -moz-transform;
-moz-transition-duration: 0.5s;
-moz-transition-timing-function: ease-out;
-moz-transform: translate(0px, 0px, 0px);
-webkit-box-shadow: 0 0 5px #000;
}
#debug {
position: fixed;
bottom: 10px;
left: 10px;
width: 160px;
height: 100px;
background-color: rgba(0, 0, 0, 0.4);
z-index: 1000;
color: white;
border-radius: 5px;
}
Raw
test1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="wrapper">
<div id="ajaxContent">
<p>test1</p>
<img src="http://shunimoto.files.wordpress.com/2010/11/japanese-curry.jpg">
</div>
</div>
</body>
</html>
Raw
test2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="wrapper">
<div id="ajaxContent">
<p>test2</p>
<img src="http://sucurry.img.jugem.jp/20100209_746842.jpg">
</div>
</div>
</body>
</html>
Raw
test3.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="wrapper">
<div id="ajaxContent">
<p>test3</p>
<img src="http://www.indocurry.com/img/curry.jpg">
</div>
</div>
</body>
</html>
Raw
test4.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="wrapper">
<div id="ajaxContent">
<p>test4</p>
<img src="http://pakistandishes.up.seesaa.net/image/chicken_curry.jpg">
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment