D3 Examples - Inertia

xxxxxxxxxx
 
<!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="https://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>
    