CSS3で動くタッチスライドショーjQueryプラグインを作ってみた

thumb007

スマホやタブレットなどのタッチイベント。
いろんなサイトでも、タッチやスワイプで動くスライドショーを多く見かけますね!
 
私もちょっと前までは、javascriptの.animate()を使って動かしていたんですけど、CSS3でも実装できるとのことで早速作ってみました!
簡単に実装できるようjQueryプラグインも作っちゃいました:)
githubに公開しているので、よかったらこちらからソースをどうぞ!
 

 
タッチイベントもjQueryなら簡単に実装できるので、プラグインの使い方と中身と一緒にご説明してきます。
 

  1. jquery.csstouchslider.jsの使い方
  2. タッチイベントの実装方法
  3. CSS3のtransformで動かす方法

 

jquery.csstouchslider.jsの使い方

 
動作もシンプルなだけに、jquery.csstouchslider.jsの使い方はとってもシンプルです!
 
githubから以下のソースコードをダウンロードして、ディレクトリにアップします。
 

  • jquery.csstouchslider.1.0.0.min.js
  • jquery.csstouchslider.1.0.0.css

 
headタグで2つのファイルを読み込みます。
 
index.html

<head>
	<link rel="stylesheet" href="jquery.csstouchslider.1.0.0.css">
	<script src="jquery.csstouchslider.1.0.0.min.js"></script>
</head>

 
スライドショーを作るHTMLは下記のように記述してください。
 
index.html

<div id="touchslider">
	<div 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()でタッチイベントを付与しています。
 
javascript

$('div').on({
	touchstart: function(){ /* 指が画面に触れた時の処理 */ },
	touchmove: function(){ /* 指が画面で動いている時の処理 */ },
	touchend: function(){ /* 指が画面から離れた時の処理 */ }
});

 
.on()は連想配列で、複数指定することができます。
touchstarttouchmovetouchendがタッチイベントです。
 
touchstart→指が画面に触れた時
touchmove→指が画面上で動いている時(動くたび呼び出されます)
touchend→指が画面から離れた時
 
この3つのイベントを使って、スライドショーのトリガーとしています。
これらの3つのイベントは、ページの座標を取得することができます。
この座標を使って、動く実際の数値を出しています。
 
javascript

$('div').on({
	touchstart: touchStart,
	touchmove: touchMove,
	touchend: touchEnd
});
//タッチイベント
function touchStart(event){
	/* 指が画面に触れた時の処理 */
	startX = event.originalEvent.changedTouches[0].pageX;
	logX = transX;
}
function touchMove(event){
	/* 指が画面で動いている時の処理 */
	event.preventDefault();
	moveX = event.originalEvent.changedTouches[0].pageX;
	moveX = (startX - moveX) * -1;
	transX = logX + moveX;
	translateX(transX, 0);
}
function touchEnd(event){
	/* 指が画面から離れた時の処理 */
	absX = Math.abs(moveX);
	num = Math.ceil(transX / itemWidth);
	if(absX > setting.sensiv){
		if(moveX < 0) num = num - 1;
	}else{
		if(moveX > 0) num = num - 1;
	}
	if(num > 0) num = 0;
	if(num < (itemLength - 1) * -1) num = (itemLength - 1) * -1;
	transX = num * itemWidth;
	translateX(transX, setting.speed);
	$('#sign').find('li').removeClass('active');
	$('#sign').find('li').eq(Math.abs(num)).addClass('active');
}

 
event.originalEvent.changedTouches[0].pageXでページのX座標を取得しています。
これは、touchstarttouchmoveのみ取得できます。
 
touchstartした時に、初めのX座標を取得しておきます。
次に、touchMoveしている時に、動かしているX座標を取得していきます。
そうすることで、touchstarttouchMoveの時のX座標の差分を求め、動かす実数を出していきます。
 
最後に、touchEndした時に設定されたタッチスワイプ感度より、大きかったらスライドする、という流れです。
今回は、タッチスワイプ感度を数値で設定していますが、これを時間などで判別し、早かったらスライドする、という仕組みにするとアプリっぽくなると思います。
これにはついてません(汗)バージョンアップした時に実装します(汗)
 

CSS3のtransformで動かす方法

 
jquery.csstouchslider.jsでは、CSS3のtransform:translateX()を使っています。
トリガーは全てjQueryですが、スライドショーの動きはこのtransform:translateX()で動かしているので、とってもスムーズです。
 
javascript

function touchStart(event){
	/* 指が画面に触れた時の処理 */
	startX = event.originalEvent.changedTouches[0].pageX;
	logX = transX;
}
function touchMove(event){
	/* 指が画面で動いている時の処理 */
	event.preventDefault();
	moveX = event.originalEvent.changedTouches[0].pageX;
	moveX = (startX - moveX) * -1;
	transX = logX + moveX;
	translateX(transX, 0);
}
function touchEnd(event){
	/* 指が画面から離れた時の処理 */
	absX = Math.abs(moveX);
	num = Math.ceil(transX / itemWidth);
	if(absX > setting.sensiv){
		if(moveX < 0) num = num - 1;
	}else{
		if(moveX > 0) num = num - 1;
	}
	if(num > 0) num = 0;
	if(num < (itemLength - 1) * -1) num = (itemLength - 1) * -1;
	transX = num * itemWidth;
	translateX(transX, setting.speed);
	$('#sign').find('li').removeClass('active');
	$('#sign').find('li').eq(Math.abs(num)).addClass('active');
}
//translateX関数
function translateX(transX, speed){
	$slide.css({
		transform:'translateX('+ transX +'px)',
		'-webkit-transform':'translateX('+ transX +'px)',
		'-moz-transform':'translateX('+ transX +'px)',
		'transition-duration':speed +'ms',
		'-webkit-transition-duration':speed +'ms',
		'-moz-transition-duration':speed +'ms'
	});
}

 
上のソースのtranslateX関数がそれに当たります。
ベンダプレフィックスを何回も書くの大変なのでひとくくりにして、オプションだけ引数にしています。
同時に、transitionのduration(アニメーション時間)も設定しています。
これは指の動きに合わせるためにtouchmoveで0msにして、touchendで自動的にスライドするために設定しています。
 
これが私の作ったプラグインのざっくり概要になります。
めちゃめちゃ軽いので是非使ってください。