A CodePen by Lance Vo.

index.html

<div id="slides">
  <nav class="slide">
    
    <ol>
      <li> Item  </li>
      <li> Item  </li>
      <li> Item  </li>
      <li> Item  </li>
      <li> Item  </li>
      <li> Item  </li>
      <li> Item  </li>
      <li> Item  </li>
      <li> Item  </li>
      <li> Item  </li>
      <li> Item  </li>
      <li> Item  </li>
      <li> Item  </li>
      <li> Item  </li>
      <li> Item  </li>
      <li> Item  </li>
      <li> Item  </li>
      <li> Item  </li>
      <li> Item  </li>
      <li> Item  </li>
      <li> Item  </li>
      <li> Item  </li>
      <li> Item  </li>
      <li> Item  </li>
      <li> Item  </li>
      <li> Item  </li>
      <li> Item  </li>
      <li> Item  </li>
      <li> Item  </li>
      <li> Item  </li>
      <!--li> Item  </li>
      <li> Item  </li>
      <li> Item  </li>
      <li> Item  </li>
      <li> Item  </li>
      <li> Item  </li>
      <li> Item  </li>
      <li> Item  </li>
      <li> Item  </li>
      <li> Item  </li>
      <li> Item  </li>
      <li> Item  </li>
      <li> Item  </li>
      <li> Item  </li>
      <li> Item  </li>
      <li> Item  </li>
      <li> Item  </li>
      <li> Item  </li>
      <li> Item  </li>
      <li> Item  </li>
      <li> Item  </li>
      <li> Item  </li>
      <li> Item  </li>
      <li> Item  </li>
      <li> Item  </li>
      <li> Item  </li>
      <li> Item  </li>
      <li> Item  </li>
      <li> Item  </li>
      <li> Item  </li>
      <li> Item  </li>
      <li> Item  </li>
      <li> Item  </li>
      <li> Item  </li>
      <li> Item  </li>
      <li> Item  </li>
      <li> Item  </li>
      <li> Item  </li>
      <li> Item  </li>
      <li> Item  </li>
      <li> Item  </li>
      <li> Item  </li>
      <li> Item  </li>
      <li> Item  </li -->
      
    </ol>
    <div class="menu"> Close </div>
  </nav> 
  
 <div class="slide" id="content">
  <div >
    <header><div class="menu">Menu</div></header>
    <p>Ball tip cow ad nisi pig, culpa cillum in.  Chuck pastrami ex, ham hock ut pariatur non jerky tri-tip aliquip venison et sirloin anim.  Pig frankfurter brisket fugiat incididunt.  Consequat pastrami beef ribs, minim esse et pork belly adipisicing magna corned beef labore prosciutto sirloin dolor.  Corned beef elit ham, hamburger ullamco aliqua strip steak est quis culpa meatloaf duis labore in consequat.  Non qui rump shank beef.  Nisi kielbasa labore, commodo drumstick short loin filet mignon adipisicing magna aliqua veniam deserunt pork belly turkey.</p><p>Ham ullamco bresaola brisket anim tri-tip swine pancetta.  Corned beef sed pig aliqua ribeye chicken capicola sirloin occaecat irure veniam esse.  Magna sed in, chuck et do fugiat.  Est incididunt ad bacon pastrami eiusmod brisket magna veniam elit ea ham.  Et pork chop ad in veniam strip steak commodo tongue sunt in.  Bresaola irure ullamco sausage nostrud voluptate, jowl meatloaf commodo ex ham.  Eiusmod drumstick ea, jerky exercitation consectetur ham hock dolore.</p><p>Boudin velit esse pork loin.  Qui jowl in voluptate.  Biltong et capicola, aliqua ham hock jerky irure ea voluptate dolor magna elit occaecat.  Tempor venison ut, pariatur commodo adipisicing salami jerky ball tip tail brisket aliquip filet mignon chicken.  Nostrud labore reprehenderit short ribs enim.  Eu dolore quis shoulder ea pork chop sed drumstick consequat nostrud et enim boudin sint.  Kielbasa salami in ground round adipisicing prosciutto.</p><p>Pork loin chuck proident brisket shank duis.  Dolore tenderloin aliquip rump.  Velit irure swine pork belly short loin.  In bresaola turducken, ex duis anim drumstick ham hock id pariatur sirloin minim pastrami tail.  Venison kielbasa minim velit bacon chuck pig capicola eiusmod et commodo.</p>
    *** THE END ***
   </div> <!-- /#content -->
  </div> <!-- #content-wrapper -->
</div> <!-- .container -->

off-canvas-w-Translate3d.markdown

off canvas w Translate3d

A CodePen by Lance Vo.

script.js

$(function () {
  var sliding = startClientX = startPixelOffset = pixelOffset = currentSlide = 0,
  slideCount = $('.slide').length;

  $('html'). on('mousedown touchstart', slideStart);
  $('html').on('mouseup touchend', slideEnd);
  $('html').on('mousemove touchmove', slide);

function slideStart(event) {
    if (event.originalEvent.touches)
      event = event.originalEvent.touches[0];
    if (sliding == 0) {
      sliding = 1;
      startClientX = event.clientX;
    }
  }

 function slide(event) {
    event.preventDefault();
    if (event.originalEvent.touches)
      event = event.originalEvent.touches[0];
     var deltaSlide = event.clientX - startClientX;

if (sliding == 1 && deltaSlide != 0) {
      sliding = 2;
      startPixelOffset = pixelOffset;
    }

if (sliding == 2) {
      var touchPixelRatio = 1;
      if ((currentSlide == 0 && event.clientX > startClientX) ||
          (currentSlide == slideCount - 1 && event.clientX < startClientX))
        touchPixelRatio = 3;
      pixelOffset = startPixelOffset + deltaSlide / touchPixelRatio;
      $('#slides').css('transform', 'translate3d(' + pixelOffset + 'px,0,0)').removeClass();
    }
  }

function slideEnd(event) {
    if (sliding == 2) {
      sliding = 0;
      currentSlide = pixelOffset < startPixelOffset ? currentSlide + 1 : currentSlide - 1;
      currentSlide = Math.min(Math.max(currentSlide, 0), slideCount - 1);
      pixelOffset = currentSlide * -$('body').width();
      $('#temp').remove();
      $('<style id="temp">#slides.animate{transform:translate3d(' + pixelOffset + 'px,0,0)}</style>').appendTo('head');
      $('#slides').addClass('animate').css('transform', '');
    }
  }
});

style.scss

@import "compass";
html,body {
  height:100%;
}

#slides {
  width:100%;
  height:100%;
  white-space:nowrap;
  @include translate3d(0,0,0)
}

.slide {
  width:100%;
  height:100%;
  display:inline-block;
}

.animate {
  @include transition(all .3s ease-out);
}

body {
  overflow:hidden;
  margin:0;
}

.slide {
  overflow:auto;
  vertical-align:top;
}