[JS]ごく普通の画像を立体的にスライスしてアニメーションで切り替える画像ギャラリー -Slicebox

使用する画像は普通のJPEG画像で、それを3Dにスライスしてアニメーションでダイナミックに切り替える画像ギャラリーを紹介します。
スライスのエフェクトもたくさん種類があります。

Slicebox – A fresh 3D image slider with graceful fallback

[ad#ad-2]

Sliceboxのデモ

デモページでは、6つのエフェクトがあります。
キャプチャはSafariで、非対応ブラウザではスライドするだけのエフェクトです。

デモページ：垂直にスライス

デモページ：水平にスライス

デモページ：ボックス状に垂直回転

デモページ：ボックス状に水平回転

[ad#ad-2]

デモページ：垂直スライスで拡散

デモページ：垂直スライスでウェーブ状

Sliceboxの実装

HTML

画像をdiv要素で内包します。

<div id="sb-slider" class="sb-slider">
	<img src="images/1.jpg" title="Creative Lifesaver"/>
	<img src="images/2.jpg" title="Honest Entertainer"/>
	<img src="images/3.jpg" title="Brave Astronaut"/>
	<img src="images/4.jpg" title="Affectionate Decision Maker"/>
	<img src="images/5.jpg" title="Faithful Investor"/>
	<img src="images/6.jpg" title="Groundbreaking Artist"/>
	<img src="images/7.jpg" title="Selfless Philantropist"/>
</div>

外部ファイル

「jquery.js」と当スクリプトを外部ファイルとして指定します。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.slicebox.min.js"></script>

デモでは外部スタイルシート（slicebox.css）でスタイルしています。

JavaScript

jQueryのセレクタで画像ギャラリーを指定し、slicebox();を実行します。

$('#sb-slider').slicebox();

スクリプトのオプションでは回転方向、パース、スピードなどが設定できます。