LoginSignup
5

More than 5 years have passed since last update.

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

Last updated at Posted at 2016-12-10

この記事は 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)

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5