zingtouch

JavaScript

タッチジェスチャーをカスタマイズできるJSライブラリ「zingtouch」

Zingtouchは、タッチ対応のデバイスにおける基本的なジェスチャー機能をカスタマイズできるJSライブラリです。近年、スマホの普及率は急速に伸びています。もはや2台持ちの人も少なくありません。小さなパソコンを持ち歩いているようなものです。しかし、パソコンと決定的に違うのは、指先ですべてが完結することでしょう。指先といえども、その操作にはタップや長押し(ロングタップ)など様々なものがありますが、Zingtouchはそれらを完全にカスタマイズできます。

zingtouch

デモ

まず、このZingtouchのデモページはタッチ対応のパソコンでない限り、スマホ・タブレットでご覧になってください。2本の指で操作しなければ確認できないものがあるためです。

  1. タップ(画面を指先で1回軽く叩く)
  2. ローテート(画面を2本の指先で回転させる)
  3. ピンチ(2本の指でつまむように操作する)
  4. ピンチアウト(2本の指の間隔を広くして拡大させる)
  5. パン(画面から指を離さずなぞる)
  6. スワイプ(画面に触れ、その指先を高速でスライド)

基本的な操作もありますが、これらはすべてカスタマイズが可能です。

例えば、タップは「ジェスチャーの開始と終了をミリ秒単位で測定/2本の指でタップすれば反応するという条件付け」。ローテートは、「右に回せば時計回り、左に回せば反時計回り」などがあります。

身近なアプリでいえば、Googleマップでローテートをすれば、地図が回転します。社会現象になりつつある、ポケモンGOでは、スワイプのスピードでモンスターボールの飛距離が変化します。

zingtouch

関連記事

  1. Swipeshow

    JavaScript

    スワイプにも対応したシンプルなスライドショーを実装できるjQueryプラグイン「Swipeshow」…

    タッチデバイスのスワイプにも対応したシンプルなスライドショーを実装する…

  2. jQuery Inline Footnotes

    JavaScript

    ホバーで脚注を表示できる「jQuery Inline Footnotes」

    jQuery Inline Footnotesはホバーすることで脚注の…

  3. no-image

    JavaScript

    フラットでシンプルなカラーピッカー実装「Pickr」

    Pickrはフラットでシンプルなカラーピッカーを実装できるのが特徴です…

  4. vDrop

    JavaScript

    選択ボックスの選択肢をドロップダウンリストで表示できる「vDrop」

    vDroppは、選択ボックスの選択肢をドロップダウンリストで表示してく…

  5. Force.js

    JavaScript

    要素を手軽にアニメーション化できる「Force.js」

    Force.jsはページ上の要素を手軽にアニメーション化させることがで…

  6. jQuery Social Share Bar

最近の記事

  1. cheero Stream 10000mAh
  2. BOSE HOME SPEAKER 300
  3. RP-PC112
  4. SRS-XB402M
  5. Lite LR30

アーカイブ

PAGE TOP