ぷるるんと動くアニメーションが気持ちいい！新感覚のナビゲーション -Gooey pagination

コンテンツスライダーや縦長ページのナビゲーションでよく見かけるビュレットタイプのナビゲーションをかわいいアニメーションで実装するテクニックを紹介します。

アニメーションの操作が気持ちいいので、コンテンツより楽しんでしまうかも。
実際の操作は、下記ページでお楽しみください。
※Chrome, Safari, Firefox, IEは11では動作しました。

Gooey pagination

アイデアの元となったのは、Dribbbleのコンセプトからだそうです。

Page scroll concept

こっちの方はアニメーションが更に流体になっています。

実装はけっこうシンプルです。

HTML

各ビュレットはリスト要素で実装されています。
5つ点の上を「.select」が移動する感じです。

<ul class="dots">
  <li class="select"></li>
  <li class="dot"></li>
  <li class="dot"></li>
  <li class="dot"></li>
  <li class="dot"></li>
  <li class="dot"></li>
</ul>

CSS

スタイルシートは思ってたより、シンプルでした。

}
.dots{
  list-style-type:none;
  background:white;
  -webkit-filter:blur(5px) contrast(10);
  padding:0;
  margin:0;
  padding-top:20px;
  padding-bottom:20px;
  padding-left:20px;
  margin-left:-10px;
  padding-right:10px;
  position:relative;
  left:100px;
  top:30px;
}
.dot{
  display:inline-block;
  vertical-align:middle;
  border-radius:100%;
  width:30px;
  height:30px;
  background:black;
  margin-left:5px;
  margin-right:5px;
  cursor:pointer;
  color:white;
  position:relative;
  z-index:2;
}
.select{
  display:block;
  border-radius:100%;
  width:40px;
  height:40px;
  background:black;
  //opacity:0.6;
  //transition:transform 300ms ease-in-out;
  position:absolute;
  z-index:3;
  top:15px;
  left:0px;
  pointer-events:none;
}

JavaScript

jquery.jsを外部ファイルとし、以下のスクリプトを記述します。

$(document).ready(function(){
  $(".dot").hover(function(){
    var cur=$(this);
    var dest=cur.position().left;
    var t=0.6;
    TweenMax.to($(".select"),t,{x:dest,ease:Back.easeOut})
  });
  var lastPos=$(".select").position().left;
  function updateScale(){
    var pos=$(".select").position().left;
    
    var speed=Math.abs(pos-lastPos);
    var d=44;
    var offset=-20;
    var hd=d/2;
    var scale=(offset+pos)%d;
    if(scale>hd){
      scale=hd-(scale-hd);
    }
    scale=1-((scale/hd)*0.35);
    TweenMax.to($(".select"),0.1,{scaleY:scale,scaleX:1+(speed*0.06)})
    
    lastPos=pos;
    requestAnimationFrame(updateScale);
  }
  requestAnimationFrame(updateScale);
  $(".dot:eq(0)").trigger("mouseover");
})