Skip to content

Instantly share code, notes, and snippets.

@abernier

abernier/index.html

Last active October 8, 2015 08:38
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save abernier/3306964 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save abernier/3306964 to your computer and use it in GitHub Desktop.
Download ZIP
Inertia
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title></title>
<style>
html, body {height:100%;}
html {overflow:hidden;}
body {margin:auto;}
#foo {
width:100%; height:100%; overflow:auto;
background:url(https://dl.dropbox.com/s/sw0qqg0j0qq8xng/grid.png?dl=1);
cursor:move;
-webkit-transform:translateZ(0,0,0);-moz-transform:translateZ(0,0,0);-ms-transform:translateZ(0,0,0);transform:translateZ(0,0,0);
-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;
}
html {-webkit-perspective:450;-moz-perspective:450px;-ms-perspective:450;perspective:450;}
body {width:100%; height:100%; position:relative;}
body, body * {-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-ms-transform-style:preserve-3d;transform-style:preserve-3d;}
.cube,
.cube > .top,
.cube > .front,
.cube > .right,
.cube > .back,
.cube > .left,
.cube > .bottom {display:block; width:5em; height:5em;}
.cube {position:relative;}
.cube > .top,
.cube > .front,
.cube > .right,
.cube > .back,
.cube > .left,
.cube > .bottom {position:absolute; -webkit-backface-visibility:visible;-moz-backface-visibility:visible;-ms-backface-visibility:visible;backface-visibility:visible;}
.cube > .top {-webkit-transform:rotateX( 90deg) translateZ( 2.5em); -moz-transform:rotateX( 90deg) translateZ( 2.5em); -ms-transform:rotateX( 90deg) translateZ( 2.5em); transform:rotateX( 90deg) translateZ( 2.5em);}
.cube > .front {-webkit-transform: translateZ( 2.5em); -moz-transform: translateZ( 2.5em); -ms-transform: translateZ( 2.5em); transform: translateZ( 2.5em);}
.cube > .right {-webkit-transform:rotateY( 90deg) translateZ( 2.5em); -moz-transform:rotateY( 90deg) translateZ( 2.5em); -ms-transform:rotateY( 90deg) translateZ( 2.5em); transform:rotateY( 90deg) translateZ( 2.5em);}
.cube > .back {-webkit-transform:rotateY(180deg) translateZ( 2.5em); -moz-transform:rotateY(180deg) translateZ( 2.5em); -ms-transform:rotateY(180deg) translateZ( 2.5em); transform:rotateY(180deg) translateZ( 2.5em);}
.cube > .left {-webkit-transform:rotateY(-90deg) translateZ( 2.5em); -moz-transform:rotateY(-90deg) translateZ( 2.5em); -ms-transform:rotateY(-90deg) translateZ( 2.5em); transform:rotateY(-90deg) translateZ( 2.5em);}
.cube > .bottom {-webkit-transform:rotateX(-90deg) translateZ( 2.5em) rotate(180deg);-moz-transform:rotateX(-90deg) translateZ( 2.5em) rotate(180deg);-ms-transform:rotateX(-90deg) translateZ( 2.5em) rotate(180deg);transform:rotateX(-90deg) translateZ( 2.5em) rotate(180deg);}
.cube > .top,
.cube > .front,
.cube > .right,
.cube > .back,
.cube > .left,
.cube > .bottom {-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box; border:1px solid; background-color:rgba(255,255,255,.8);}
#my3 {font-size:140%; position:fixed; left:50%; top:50%; margin-left:-2.5em; margin-top:-2.5em; -webkit-transform:translateZ(5em);-moz-transform:translateZ(5em);-ms-transform:translateZ(5em);transform:translateZ(5em);}
</style>
</head>
<body>
<div id="foo"></div>
<div id="my3" class="cube">
<div class="top"></div>
<div class="front"></div>
<div class="right"></div>
<div class="back"></div>
<div class="left"></div>
<div class="bottom"></div>
</div>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.js"></script>
<script src="https://rawgithub.com/EightMedia/hammer.js/v1.0.5/dist/hammer.js"></script>
<script src="https://rawgithub.com/EightMedia/hammer.js/v1.0.5/dist/jquery.hammer.js"></script>
<script src="https://rawgithub.com/paulirish/1579671/raw/rAF.js"></script>
<script src="https://rawgithub.com/abernier/3225993/raw/loop.js"></script>
<script src="https://rawgithub.com/brandonaaron/jquery-mousewheel/master/jquery.mousewheel.js"></script>
<script>
var my3 = {
rx: 0,
ry: 0
};
var bgx = 0,
bgy = 0;
$(function () {
(function () {
var x = 0, y = 0,
vx = 0, vy = 0,
ax = 0, ay = 0,
friction = .025;
var ex = 0,
ey = 0;
var looop = new Loop(function (t, t0) {
if (!t0) {
return;
}
var dt = (t - t0) / 1000; // seconds
//console.log(dt);
var dx = ex - x,
dy = ey - y,
dt2 = Math.pow(dt, 2);
ax = dx / dt2,
ay = dy / dt2;
vx += ax * dt;
vy += ay * dt;
vx *= friction;
vy *= friction;
x += vx * dt;
y += vy * dt;
//
bgx = x;
bgy = y;
$('#foo').css('background-position', Math.round(bgx) + "px " + Math.round(bgy) + "px");
//
my3.rx = y;
my3.ry = -x;
$('#my3').css('transform', 'translateZ(5em) rotateX(' + my3.rx + 'deg) rotateY(' + my3.ry + 'deg)');
// STOP!
if (Math.sqrt(vx*vx + vy*vy) < 1) {
//return false;
}
});
$(window).mousewheel(function(event, delta, deltaX, deltaY) {
ex += -deltaX * 5;
ey += deltaY * 5;
looop.start();
});
// OK
(function () {
var prevPageX,
prevPageY;
$('#foo')
.hammer({drag_min_distance: 0})
.on({
dragstart: function (e) {
prevPageX = (e.gesture && e.gesture.center || e.originalEvent).pageX;
prevPageY = (e.gesture && e.gesture.center || e.originalEvent).pageY;
},
drag: function(e) {
var pageX = (e.gesture && e.gesture.center || e.originalEvent).pageX,
pageY = (e.gesture && e.gesture.center || e.originalEvent).pageY;
ex += (pageX - prevPageX);
ey += (pageY - prevPageY);
prevPageX = pageX;
prevPageY = pageY;
looop.start();
},
dragend: function(e) {
prevPageX = void 0;
prevPageY = void 0;
}
});
}());
// OK
/*$(window).mousemove(function (e) {
ex = e.pageX;
ey = e.pageY;
looop.start();
});*/
}())
});
</script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-13126287-1', 'abernier.name');
ga('send', 'pageview');
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment