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

jQuery.sdFilterMeコンテンツを並べ替えれるフィルタリング機能の実装「jQuery.sdFilterMe」前のページ

多彩なローディング画面を実装できる「jQuery LoadingOverlay」次のページjQuery LoadingOverlay

関連記事

  1. no-image

    JavaScript

    マスクエフェクトが素敵なスライダー実装「Masked Circle Slider」

    Masked Circle Sliderは、円形のマスクエフェクトが素…

  2. responsive-flip-pricing-table

    JavaScript

    レスポンシブでフリップによる価格表示の切り替えができる「Responsive Flip Pricin…

    レスポンシブに対応し、フリップによる価格表示の切り替えもできるテーブル…

  3. Fitty

    JavaScript

    親コンテナにテキストをフィットさせられる「Fitty」

    Fittyはテキストをスケールアップ、またはスケールダウンして親コンテ…

  4. DateTime Picker

    JavaScript

    レスポンシブでフラットデザインの「DateTime Picker」

    DateTime Pickerはレスポンシブ対応のフラットデザインによ…

  5. funnyText.js
  6. SweetAlert2

    JavaScript

    カスタマイズ性が高くアクセシビリティ(WAI ARIA)に優れたアラート実装「SweetAlert2…

    SweetAlert2は、レスポンシブ対応でカスタマイズ性が高くアクセ…

最近の記事

  1. OWL-LPB6701LA
  2. cheero Power Mountain mini 30000mAh CHE-110
  3. 帆布カメラインナーケース B-2タイプ

アーカイブ

PAGE TOP