TIPSCORDINGDESIGNPROGRAMMINGTOOLSCONTACTPROGRAMMING2016.5.18CSS3で動くタッチスライドショーjQueryプラグインを作ってみたスマホやタブレットなどのタッチイベント。いろんなサイトでも、タッチやスワイプで動くスライドショーを多く見かけますね!私もちょっと前までは、javascriptの.animate()を使って動かしていたんですけど、CSS3でも実装できるとのことで早速作ってみました!簡単に実装できるようjQueryプラグインも作っちゃいました:)githubに公開しているので、よかったらこちらからソースをどうぞ!ダウンロードタッチイベントもjQueryなら簡単に実装できるので、プラグインの使い方と中身と一緒にご説明してきます。動作もシンプルなだけに、jquery.csstouchslider.jsの使い方はとってもシンプルです!githubから以下のソースコードをダウンロードして、ディレクトリにアップします。jquery.csstouchslider.1.0.0.min.jsjquery.csstouchslider.1.0.0.cssheadタグで2つのファイルを読み込みます。src="jquery.csstouchslider.1.0.0.min.js"></script></head>スライドショーを作るHTMLは下記のように記述してください。id="slide"><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul></div></div>liタグにはテキストだけでなく、画像も入れられます!実行文は下記の通りです。オプションに、タッチスワイプ感度とスライドアニメーション時間を設定できます。javascript$(function(){$('#slide').csstouchslider({speed:300,sensiv:50});});これだけです!あとはCSSでスタイルして完成です。タッチイベントの実装方法このjquery.csstouchslider.jsでは、jQueryの.on()でタッチイベントを付与しています。}});.on()は連想配列で、複数指定することができます。touchstart、touchmove、touchendがタッチイベントです。touchstart→指が画面に触れた時touchmove→指が画面上で動いている時(動くたび呼び出されます)touchend→指が画面から離れた時この3つのイベントを使って、スライドショーのトリガーとしています。これらの3つのイベントは、ページの座標を取得することができます。この座標を使って、動く実際の数値を出しています。setting.speed);$('#sign').find('li').removeClass('active');$('#sign').find('li').eq(Math.abs(num)).addClass('active');}event.originalEvent.changedTouches[0].pageXでページのX座標を取得しています。これは、touchstartとtouchmoveのみ取得できます。touchstartした時に、初めのX座標を取得しておきます。次に、touchMoveしている時に、動かしているX座標を取得していきます。することで、touchstartとtouchMoveの時のX座標の差分を求め、動かす実数を出していきます。最後に、touchEndした時に設定されたタッチスワイプ感度より、大きかったらスライドする、という流れです。今回は、タッチスワイプ感度を数値で設定していますが、これを時間などで判別し、早かったらスライドする、という仕組みにするとアプリっぽくなると思います。これにはついてません(汗)バージョンアップした時に実装します(汗)CSS3のtransformで動かす方法jquery.csstouchslider.jsでは、CSS3のtransform:translateX()を使っています。トリガーは全てjQueryですが、スライドショーの動きはこのtransform:translateX()で動かしているので、とってもスムーズです。+'ms'});}上のソースのtranslateX関数がそれに当たります。ベンダプレフィックスを何回も書くの大変なのでひとくくりにして、オプションだけ引数にしています。同時に、transitionのduration(アニメーション時間)も設定しています。これは指の動きに合わせるためにtouchmoveで0msにして、touchendで自動的にスライドするために設定しています。これが私の作ったプラグインのざっくり概要になります。軽いので是非使ってください。