jQuery
スマホ用サイドメニュー 2
さて、ナビが出てくる所の動きは理解出来た。 後googleナビに近づけるためには、ナビの上下の動きがどうもカクカクした感じがあるので、何とかならんかと本家を見てみた。 google のソースでは、ナビ内をスライドすると、 transition : -moz-transform 0ms ease-in-out 0s がついて、 transform の値が translate3d(0px, -109px, 0px) のようになる。 これを再現するには。。 touchstart、touchmove, touchendの部分をちょっと変えます。 $(settings.menu_list).bind({ ‘touchstart’: function(e) { menu_list_height = $(settings.menu_list).height(); sfY = event.touches[0].screenY; }, ‘touchmove’: function(e) { mfY = event.changedTouches[0].screenY; var moveY = smY + mfY – sfY; // moving $(this).css({ “-webkit-transition”: “all “+timer+”ms cubic-bezier(0.075, 0.82, 0.165, 1)”, ‘-webkit-transform’:’translate3d(0px,’+ moveY +’px,0px)’, }); […]