Inertia Scrolling Detection

by tonytlwu

HTML

<script src="http://ricostacruz.com/jquery.transit/jquery.transit.js?v=14845"></script>
<pre></pre>
<article><figure><div><span></span></div></figure></article>

CSS

html, body {
    height: 100%;
    overflow: hidden;
}

article {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

figure {
  height: 8000px;
}

pre {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
}

div {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    -webkit-transform: translate3d(-50%,-50%,0);
    -webkit-transform-style: preserve-3d;
    -webkit-perspective: 200;
}

div > span {
    display: block;
    width: 100%;
    height: 100%;
    background: red;
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1, max-scale=1">
<style>

JavaScript

$('article').on('scroll',function(){
    var scrollPos = $('article').scrollTop();
    $('pre').html(scrollPos);
    $('div > span').css({ rotateX: scrollPos/2+'deg', rotateY: -scrollPos/4+'deg' });
}).trigger('scroll');