[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();

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

sponsors

top of page

©2018 coliss