[jQuery]マウスホイール操作プラグインを使ってGoogle Glassのようなサイトを作る

Google Glassのサイトを見てスクロールの処理を昨日紹介したプラグインでつくれないかなーっとチャレンジしてみました。

CSS

body {
  overflow: hidden;
  margin:0;
  pading:0;
}

div{
  height:1000px;
  width:1000px;
  overflow:hidden;
  position:relative;
  padding:0;
}

ol{
  list-style-type:none;
  margin:0;
  padding:0;
  overflow:hidden;
  height:10000px;
  width:1000px;
  position:absolute;
}

li{
  width:1000px;height:1000px;
  padding:0;
  margin:0;
}

HTML

<div>
  <ol>
    <li style="background-color:red;">No1</li>
    <li style="background-color:yellow;">No2</li>
    <li style="background-color:blue;">No3</li>
  </ol>
</div>

JS

jQuery(function($){
  var bAnimating = false;
  var nIdx = 0;
  $('ol').on('mousewheel',function(e){

    if(bAnimating) return;
    bAnimating = true;

    var $t = $(this);
    var nTop;
    if(e.deltaY > 0){
      if(nIdx == 0){
        bAnimating = false;
        return;
      }
      nIdx = nIdx - 1;

    }else{
      if(nIdx == 2){
        bAnimating = false;
        return;
      }
      nIdx = parseInt(nIdx,10) + 1;
    }

    nTop = (-1000*nIdx) + 'px';

    $t.animate({
      top:nTop
    },1000,'easeInOutExpo',function(){
      bAnimating = false;
    });
  });
});

上のコードをベースに動くには動くんだけどGoogle Glassのようにフルサイズで表示させたい場合は、上の処理に加えて$(window).resizeの処理も必要になってくる。