iPhone・Android・PCでフリックを実装できるjQueryプラグイン

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

スマートフォンサイトを作る際に、
フリック操作を取り入れたものを作ることがあり、

こちらのものを使わせていただいていました。

実際に使っているうちに、個人的にほしい機能などを追加したりしていたのですが、

毎回色々追加などしているうちにごちゃごちゃで分かりづらくなってきてしまったので、(piglovesyou様 すみません・・。)
自分で使いやすいように作り直してみました!


実装した機能

  • IEに対応(IE6〜)
  • フリックエリア クリック時、フリックした場合には「縦方向のスクロールストップ」。
    普通に縦方向にスクロールした場合には「フリックの操作をストップ」する機能の追加。
  • フリックした時、フリックエリアの頭までスクロールする機能の追加。
  • 初回の「フリックコンテンツの位置」を指定する機能を追加。
  • アドレスに「フリックコンテンツ位置のID(ハッシュ)」を指定することにで、そのコンテンツへ移動する機能を追加。
  • タイマーで時間が来ると次のコンテンツへ移動する機能を追加。

実際の使い方

HTML head

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/smoothAnchor.js"></script>
<script type="text/javascript">
	$("#flick").flick();
</script>

HTML

<!-- 大枠で囲む -->
<div id="flick">

	<!-- ナビを「flickNav」クラスで囲む -->
	<ul class="flickNav">
		<li><a href="#content01"></a></li>
		<li><a href="#content02"></a></li>
		<li><a href="#content03"></a></li>
	</ul>

	<!-- フリックエリアを「container」クラスで囲む -->
	<div class="container">
		<!-- itemを「itemBox」クラスで囲む -->
		<div class="itemBox">
			<div id="content01" class="item">
				<figure>1</figure>
			</div>
			<div id="content02" class="item">
				<figure>2</figure>
			</div>
			<div id="content03" class="item">
				<figure>3</figure>
			</div>
		</div>
	</div>

	<!-- 
	次へ進むには「next」クラス、前に戻るには「prev」クラスで囲う
	ulのクラスはなんでもOKです。
	-->
	<ul class="next_prev">
		<li class="next">Next</li>
		<li class="prev">Prev</li>
	</ul>
</div>

必須なCSS

div.container {
     overflow: hidden;
}
div.itemBox {
     position: relative;
}
div.container .item {
     float: left;
}
.moving {
     -webkit-transition: -webkit-transform .2s ease-out;
     -moz-transition: -moz-transform .2s ease-out;
     -o-transition: -o-transform .2s ease-out;
     -ms-transition: -ms-transform .2s ease-out;
}

オプション

$("#flick").flick({
     contentNum: 0,
     centerPosition: true,
     speed: 200,
     timer: false
});
contentNum
初回の「フリックコンテンツの位置」を指定。0から。
デフォルトは「0」。
centerPosition
フリックした時、フリックエリアの頭までスクロールする機能を使用するか。
デフォルトは「true」
speed
動きのスピード。
デフォルトは200
(transformが使えない場合のスピードです。使える場合はCSS側のスピードになります。)
timer
タイマーで次のコンテンツへ移動の移動時間。(1秒の場合「1000」)。
デフォルトは「false」(自動で回らないようになっています)。

仕様の説明

  • セレクトされているflickNavのクラスは「selected」
  • 「next」「prev」の次or前のコンテンツがない場合のクラスは「end」
  • IE6で使用する場合は、「container」に幅をいれるようにしてください。
  • PCサイトで使う場合で、コンテンツの中にimgが入ってる場合には、フリック時に画像をドラックしてしまいます。imgに「pointer-events: none;」 を入れるとドラックされないようになります。

そろそろコードは、githubで公開していくようにしたほうがいいですね・・。

コメント : 12

コメントフォーム
you : 2012年04月16日 (月) 01:14

はじめまして。
初心者です。

とても素敵なサンプルを見つけて早速使ってみています。

index2.html の方です。

画像を指定してAndroidで見てみたところ、
スマホの横幅より画像が大きい場合、
右側が画面幅に合わせてカットされます。
例えば画像を画面幅に合わせて自動で縮小するにはどこを修正すればいいでしょうか・・・。

宜しくお願いいたします。

kamem : 2012年04月24日 (火) 12:59

>youさん

返事遅くなりまして、すみません!
windowの幅が変わったときに画像のサイズを変えたい場合には「MediaQuery」を使い
windowのサイズによって、画像のサイズを変えてみるのはどうでしょうか?

例としては下記のような感じですかね!

/* スクリーンサイズが479以下の場合  */
@media screen and (max-width: 479px) {
	img {
		width: 320px;
		height: auto;
	}
}
/* スクリーンサイズが480以上の場合  */
@media screen and (min-width: 480px) {
	img {
		width: 480px;
		height: auto;
	}
}

時間がある時にでも、サンプル用意してみようと思います!

etou : 2014年04月19日 (土) 00:22

はじめまして。
とてもシンプルで使いやすそうなプラグインですね!
現在制作中のサイトで使えるか試しています。
全画面背景のサイトを作っているので、
index2.html を参考にしました。
使用するためのカスタマイズで、
 ・1ページに、4つを同時に使用
 ・「next」「prev」ボタンを画像背景の上に設置
を実施しました。
同時使用は
var $container = $('.container','#flick,#flick2,#flick3,#flick4');
var $item = $('.item','#flick,#flick2,#flick3,#flick4');
とする事で動作しました。
ボタンを画像の上に持ってくるため、
ボタン表示のCSSに "z-index: 100;" を追加して、
テキストボタンを画像に変更したところ、
1つ目の「next」「prev」クリックで、4つ目のコンテンツが動いてしまいました。
コンテンツの上に「next」「prev」ボタンを持ってくる方法がありましたら、
教えていただけますでしょうか。
不躾なお願いで大変恐縮ですが、
何を試したらよいかも分からなくなってしまった為、
助けていただけると大変ありがたいです。
よろしくお願いいたします。

etou : 2014年04月19日 (土) 00:24

画像ボタンの件、自己解決しました。
「next」「prev」のCSSを、デフォルトのまま変更していました(><)
お騒がせして申し訳ありませんでした。
このプラグインを使わせていただきます。
ありがとうございます。

kei : 2014年04月19日 (土) 00:25

はじめまして。
余分な機能が省かれた軽そうなスクリプトなので、使ってみたいと思っています。
動作確認の為、複数設置のサンプル画面を iPad で見たところ、
フリック動作で画面がふわふわと動いてしまい、とても見辛い感じになっていました。
一つだけ設置してある、index2の方は、フリックで画面が動いたりしませんでした。
題名には iPad とは書かれていませんでしたが、
スクリプトに iPad を認識するようなコメントが書かれていたので、使えると思ったのですが、
iPad は対象外なのでしょうか?
複数設置を予定しているので、
この画面がふわふわ動いてしまうことがなくなれば、使ってみたいと思います。
直す箇所が分かるようでしたら、教えていただけますでしょうか?
お手数をおかけしますが、ご確認をよろしくお願いいたします。

kamem : 2014年04月19日 (土) 00:26

>keiさん
画面がふわふわ動くというのはどういうことでしょうか・・?
フリックをするとフリックのコンテンツ位置に自動的にスクロールするような仕様になっているのですが、その機能ののことでしょうか?
それでしたらオプションの「centerPosition」をfalseにすればその機能をきることができますので
試してみてください。

kei : 2014年04月19日 (土) 00:32

御礼が遅くなってしまい、すみませんでした。
ふわふわ、しなくなりました!
教えていただき、ありがとうございます。
もうひとつ、これは出来るかどうかわからないのですが、
スマートホン、タブレット端末は縦持ちのときだけ、
フリックエリアの「高さ」を画面に合わせることは可能でしょうか?
現在は「幅」を合わせるようになっているので、中に置いているテキストが、隠れて見えなくなってしまいました。
PCや横持ちの場合は今の状態で良いのですが、
縦持ちのときだけ制御を変える、なんてことは可能でしょうか?
他のscriptを試してみたり、色々試行錯誤してみたのですが、
IEにも対応できて複数設置もできるのは、こちらのサイトだけでしたので、
できればこちらのscriptを使わせていただきたいと思っています。
お手数をおかけしますが、ご確認をよろしくお願いいたします。

kamem : 2014年04月19日 (土) 00:33

>keiさん
縦と横で制御を変えるというよりは、
「MediaQuery」を使ってCSSを切り替えるというのはどうでしょうか。
縦、縦の場合それぞれ、見た目が損なわれないように
横幅に応じてCSSを調節すれば行けるような気がします!
この記事のコメントの2番目のような感じです。

ken : 2014年04月19日 (土) 00:36

はじめまして。
素敵なJSありがとうございます。
フリックさせるブロックをjQueryでフェードインさせたり、
animateで画面外からスライドインさせたときですが
マウスでフリックエリアをクリックするとフリックできなくなります。
またその時フリックコンテンツの中にaタグでリンクを貼っている場合でも同様で
リンク先に飛ばなくなります。
何か対処法はありませんでしょうか??
よろしくお願いいたします。

匿名 : 2014年04月19日 (土) 00:36

フリック用のjsを利用させていただいているんですが、いいねボタンやツイートボタンが中に入ると正常に動かないのですが、回避策はありますか?ちなみに挙動が不安定なのは、iPhoneとiPadです。

marumen : 2014年04月19日 (土) 00:38

はじめまして。
とても素晴らしいサンプルを拝見し早速使用させていただいております。
一点お聞きしたいのですが、画像を読み込んでいる際に一瞬ですが、元の画像が大きく表示されてしまいます。
こちらはloading画像を表示させるなど、一瞬の表示崩れを回避する方法はございますでしょうか?
以上、何卒宜しくお願い致します。

nao : 2014年04月19日 (土) 00:38

初心者の私でもとても解りやすいので、ありがたいです。
質問ですが、IMGにリンクを設定したのですが、反応がありません。
どうしたらリンク設定出来るようになりますか?
ご回答お待ちしています。

トラックバック : 0

http://develo.org/mt/mt-tb.cgi/84

このページの先頭へ戻る