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

top of page

©2017 coliss