iPhoneやAndroidのスマホ系サイトで、
指をタッチしてスライドさせるスワイプといわれる動作。
このスワイプ動作はCSSのみでは実現することが困難で、
実装するには意外と面倒だったりします。
そこで、このスワイプ動作を比較的簡単に実装することが出来る
jQueryプラグインがあったのでいくつか紹介してみます。
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
スワイプ動作が付いた画像ギャラリーを実装できるjQueryプラグイン。
デモページの画像ギャラリーはjQueryMobileベースになっていて
ヘッダー/フッターのコントロールバーが付いて
自動で隠れたりする動作も実装されています。
対象プラットフォームは
iPhone(iOS)、Android、BlackBerryなどなど様々対応しているので
スマホサイト向けの画像ギャラリーが必要になった際には
これがあれば簡単に組み込むことが出来そうです。
これらのプラグインを使ってサイト上にスワイプ動作を実装させることで
画像ギャラリー的な使い方とは別に、
iframeの様なページ内でスクロールさせる動作も
実装できるのではないかと思います。
スマホサイトでスワイプ動作が必要になった際ぜひ。。。