ITエンジニア/デザイナ向けにオープンソースを毎日紹介

iPhone6sから追加された機能が3D Touchです。まだまだ公式アプリくらいしか提供していないこと、UXとして非常に分かりづらいこともあって使うケースは多くないのですが、今後広まっていくことでしょう。

そんな3D TouchをWeb上でも試せるのが3D Touch JavaScriptです。Webの世界でも3D Touchが使えればもっと早く広まるかも知れません。

3D Touch JavaScriptの使い方

実際に動かしたところです。画面の押す力によってForceの値が変わっています。また、それに伴ってぼかしのスタイル設定も適用されています。

押した際のイベントとして

events[0].force
が取得できるようになりました。これは0〜1の値が来るものです。まだiOSのみということはありますが、Androidなどでも3D Touchが流行ったら一気に広まるかも知れません。また、Cordovaのようなハイブリッドアプリでも使えますね。

3D Touch JavaScriptはHTML5/JavaScript製のソフトウェア(ソースコードは公開されていますがライセンスは明記されていません)です。

3D Touch JavaScript Demo

freinbichler/3d-touch

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2