スマフォやタブレットなどのタッチデバイスでちょっと面白いサムネイルプレビューを与える -Kort

デスクトップのホバーだけでなく、タッチデバイスのタッチとスワイプでもかっこいいアニメーションを伴ったサムネイル画像のプレビューコンセプトを紹介します。

Kort

デモはiPhone, iPadなどのタッチデバイス、デスクトップだったらWebkit系のChrome, Safariでご覧ください。
オススメはタッチデバイスです。

各デモは、サムネイル画像をタッチすると複数の画像がアニメーションで広がるので、その広がった画像群をスワイプしてください。
※デスクトップだと一枚ずつ送るのが難しいです。

デモページ：Default

3Dの空間に配置した画像を一枚ずつ左右にスライドします。

デモページ：Concave

中央の画像を中心に凹型に配置され、画像を一枚ずつスライドします。

デモページ：Stack

重なった画像を一枚ずつスライドします。

やはり、タッチデバイスがベストビューです。
下記はiOSでのキャプチャです。

3つのエフェクトを合成

各サムネイル画像は、下記のようなコードで複数のサムネイル画像を重ねています。

HTML

<h2>Default</h2>
<div class="thumb kort">
	<img src="http://placekitten.com/200/200" width="200" height="200">
	<img src="http://placekitten.com/200/201" width="200" height="200">
	<img src="http://placekitten.com/200/202" width="200" height="200">
	<img src="http://placekitten.com/200/203" width="200" height="200">
	<img src="http://placekitten.com/200/204" width="200" height="200">
	<img src="http://placekitten.com/200/209" width="200" height="200">
	<img src="http://placekitten.com/200/206" width="200" height="200">
	<img src="http://placekitten.com/200/207" width="200" height="200">
	<img src="http://placekitten.com/200/208" width="200" height="200">
</div>