title: parallax scrolling columns with different easing
body: <p>the scenario:
  3 columns, middle one has different easing.
  translate on mousewheel - smooth (looking like inertia on ios).</p>
  
  <p>i found this example here:
      <a href="http://www.benoitchalland.com/projects" rel="nofollow">http://www.benoitchalland.com/projects</a></p>
  
  <p>but don't know how to build it myself from scratch.</p>
  
  <p>any ideas?</p>
  
  <p>note: to see the effect, scroll until you see the 3 columns with images. </p>
  
  <p>I tried the </p>
  
  <pre><code> $window.on("mousewheel DOMMouseScroll", function(event){
   // event.preventDefault();
   var scrollTop = $window.scrollTop();
       $(".center").css({
           "-webkit-transform": "translate3d(0,-" + scrollTop  + "px,0)",
           "-moz-transform": "translate3d(0,-" + scrollTop  + "px,0)"
       });
  });
  
  
  .center {
      -webkit-transition: all 800ms linear;
      -moz-transition: all 800ms linear;
      -o-transition: all 800ms linear;
      transition: all 800ms linear;
  }
  </code></pre>
  
  <p>but if I don't <code>prevendDefault()</code> it first jumps and then animates and if I do prevent default, it's stuck.</p>