Sample List

3D Touchに対応させられるという[Pressure.js]を弄ってみた

概要

3D Touchといえば、言わずと知れたiPhoneの機能の一つで、画面をグゥーっと押し込むことによって様々な効果が得られるアクションですね。

その3D TouchをなんとWeb上で扱えるようにするJSのライブラリがあるようで、それが今回ご紹介する[Pressure.js]です。
※非対応端末でも、画面を押している長さで判定できるようです

次に実際のコードを交えながらサンプルを紹介していきますが、コード雛形はこのような形です。 

Pressure.set( '#hoge', {
  start: function( event ){
    // this is called on force start
  },
  end: function(){
    // this is called on force end
  },
  startDeepPress: function( event ){
    // this is called on "force click" / "deep press", aka once the force is greater than 0.5
  },
  endDeepPress: function(){
    // this is called when the "force click" / "deep press" end
  },
  change: function( force, event ){
    // this is called every time there is a change in pressure
    // 'force' is a value ranging from 0 to 1
  },
  unsupported: function(){
    // NOTE: this is only called if the polyfill option is disabled!
    // this is called once there is a touch on the element and the device or browser does not support Force or 3D touch
  }
} );

コードサンプル

まずはPressure.js自体を読み込みましょう。 

<script src="js/lib/pressure.min.js"></script>

押し込む強さによって拡縮縮小・角丸調整・回転が行われるサンプルを作ってみようと思います。

HTML

<div id="test1"></div>
<div id="test2"></div>
<div id="test3"></div>

JavaScript（拡大縮小）

Pressure.set( '#test1', {
  start: function( event ){
    this.classList.remove( 'end' );
    this.classList.add( 'start' );
  },
  end: function(){
    this.classList.remove( 'start' );
    this.classList.add( 'end' );
    this.style.transform = 'scale(1)';
  },
  change: function( force, event ){
    if( force * 4 >= 1 ){
      this.style.transform = 'scale('+force * 4+')';
    }
  },
} );

JavaScript（角丸調整）

Pressure.set( '#test2', {
  start: function( event ){
    this.classList.remove( 'end' );
    this.classList.add( 'start' );
  },
  end: function(){
    this.classList.remove( 'start' );
    this.classList.add( 'end' );
    this.style.borderRadius = 0;
  },
  change: function( force, event ){
    this.style.borderRadius = force * 50+'%';
  },
} );

JavaScript（回転）

Pressure.set( '#test3', {
  start: function( event ){
    this.classList.remove( 'end' );
    this.classList.add( 'start' );
  },
  end: function(){
    this.classList.remove( 'start' );
    this.classList.add( 'end' );
    this.style.transform = 'rotate(0deg)';
  },
  change: function( force, event ){
    this.style.transform = 'rotate('+force * 360+'deg)';
  },
} );

3つとも共通して離すと元に戻るようにしております。また、戻る時にはtransitionを掛けたかったため、押された時（start）と離れた時（end）でclass調整をしています。

結果

赤…拡大縮小, 青…角丸調整, 黄…回転

一覧に戻る