もちもちエクスペリエンスを向上させる

この記事は J2complexed Advent Calendar 2016 の11日目の記事です。

突然ですが、もち。もちもち。もっちり。文字としても、声に出しても、浮かび上がる触感、すばらしいですね。

スマホではhoverを切る、よく飛び交う会話です。
もちもちさせるチャンスなのでもったいないですね。
ボタンも簡易的にもっちりさせます。

DOM

<a href="mochi/" class="mochi"></a>

js

var href;

$('.mochi')
	.on('touchstart',function(e){
		e.preventDefault();
  		$(this).addClass('is-touch').removeClass('is-off');
		href = $(this).attr('href');
  	})
  	.on('touchend',function(e){
  		$(this).removeClass('is-touch').addClass('is-off');
		setTimeout(function(){
			window.location.href = href;
  		},400);
	});
});

Sass

.mochi {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #8cb;
  display: block;
  position: relative;
  transition-duration: 0.7s;
  transition-timing-function: cubic-bezier(.16,.72,.36,.94);
  &.is-touch {
    transform: scale(1.17,1.1);
  }
  &.is-off {
    transform: scale(0.9);
  }

やっていることはとてもシンプルなので、説明するまでも、という感じですが、
touchstart / touchend で、触れた時、離した時用にclassを振って、もちっとさせるのはcssのtransitionに任せます。
easingを入れてそれっぽくします。
（cssのeasingを設定するには、みなさまご存知のcubic-bezierがべんり）

ボタンに触れたときの通常の遷移をe.preventDefault();でキャンセルして、touchendしてから、改めて遷移させます。
指を離したときの縮み具合をちょっと見せたいので、ちょっとだけ遷移を遅らせると、もちもちを漏れなくお届けできますね。もちもちの押し売り。

---

実際もちもちさせたのはこちら。
ねむいのでPCのことフォローしてないので、スマホでみないと動きません！もちもち。

（codepenのEmbed貼ろうとしたら貼れないんですねqiita）