iPhoneやAndroidのスマホ系サイトで、
指をタッチしてスライドさせるスワイプといわれる動作。
このスワイプ動作はCSSのみでは実現することが困難で、
実装するには意外と面倒だったりします。

そこで、このスワイプ動作を比較的簡単に実装することが出来る
jQueryプラグインがあったのでいくつか紹介してみます。

Skinkers Labs : TouchSwipe


Skinkers Labs : TouchSwipe

1本指でスワイプ動作させるものから
指を2本使ってスワイプさせるものから
クリックと併せて使うものまで色々なパターンでの
動作を実装することが可能になっています。

デモページは以下のように数種類用意されています。
—————————————————-
・Basic swipes
・Single swipe
・2 finger swipe
・Swipe threshold
・Swipe status
・Click vs Swipe
・Trigger on end or at threshold
・Swiping and Page scrolling
・Image gallery Example
—————————————————-

そしてもう一つ。

PhotoSwipe


PhotoSwipe

スワイプ動作が付いた画像ギャラリーを実装できるjQueryプラグイン。

デモページの画像ギャラリーはjQueryMobileベースになっていて
ヘッダー/フッターのコントロールバーが付いて
自動で隠れたりする動作も実装されています。

対象プラットフォームは
iPhone(iOS)、Android、BlackBerryなどなど様々対応しているので
スマホサイト向けの画像ギャラリーが必要になった際には
これがあれば簡単に組み込むことが出来そうです。

これらのプラグインを使ってサイト上にスワイプ動作を実装させることで
画像ギャラリー的な使い方とは別に、
iframeの様なページ内でスクロールさせる動作も
実装できるのではないかと思います。

スマホサイトでスワイプ動作が必要になった際ぜひ。。。

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (0)







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

iPhoneやAndroidでスワイプ動作を実装するjQueryプラグイン

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Tweets
Book
  • jQuery Technical Note
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR