ScrollTween.jsでのscrollTo()の調整

ScrollTween.jsではscrollTo()というメソッドがあり、
これを使うと任意の位置に移動する事が出来る。
けどよくあるぐいーんって移動するタイプではなくて、
ぱっと移動するのでちょっと面白みに欠けてしまうような気がする。

ということでぐいーんって移動するようにさせる為に関数を書いてみた。

//移動させるための関数
function move(container,to,tick){
  var toPoint = container.getScrollTop();

  var direction = (to < toPoint)?1:-1;

  var interval = setInterval(function(){
    toPoint = toPoint - tick * direction;
    container.scrollTo(toPoint);

    if(direction == 1){
      if(toPoint <= to){
        container.scrollTo(to);
        clearInterval(interval);
      }
    }
    else{
      if(toPoint >= to){
        container.scrollTo(to);
        clearInterval(interval);
      }
    }
  },1);
}

//使い方
$(".hoge").on("click",function(e){
  e.preventDefault();
  move(container,0,15);//第三引数を変える事でスピード変更可能
});

ということでこの関数を使うことでぐいーんって滑らかに移動するようになり、
パララックスサイトとしてちょっと工夫が出来て面白いサイトになるのではないかと。

ちなみに以前書いたScrollTween.jsに関する記事はこちらから。