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. Responsive Parallax Drag-slider With Transparent Letters
  2. AniX

    JavaScript

    優れたパフォーマンスと互換性を備えたアニメーションライブラリ「AniX」

    AniXは優れたパフォーマンスと互換性を備えた軽量のアニメーションライ…

  3. Slickhover.js

    JavaScript

    滑らかでスムーズなホバーエフェクトを実装できるjQueryプラグイン「Slickhover.js」

    とても軽量で使いやすいのがいいですね。ホバー時に滑らかでスムーズなエフ…

  4. Bara-Bones-Slider

    JavaScript

    優れたカスタマイズ性を有するjQueryスライダー「Bara-Bones-Slider」

    Bara-Bones-Sliderは、優れたカスタマイズ性を有するイメ…

  5. scroll-scope.js

    JavaScript

    親要素の影響を受けずに子要素だけを固定してスクロールさせる「scroll-scope.js」

    scroll-scope.jsは親要素の影響を受けずに子要素だけを固定…

  6. FitVids.JS

    JavaScript

    YouTubeやVimeoからの埋め込み動画をレスポンシブにするjQueryプラグイン「FitVid…

    YouTubeやVimeoからの埋め込み動画をレスポンシブに対応させる…

最近の記事

  1. スタバのドリップのホットのショート
  2. LE エルイー 6 PANEL CAP
  3. タリーズ ハウスブレンド
  4. BAG-TW1BKシリーズ

アーカイブ

PAGE TOP