jQueryを使ってのスライドショープラグインは様々ですが、
切り替わる演出を22種類もの多彩なエフェクトから選ぶことが出来る
「Skitter – Slideshow for anytime!」がかなりカッコよかったのでご紹介。

Skitter – Slideshow for anytime!


Skitter – Slideshow for anytime!

プラグインページにてデモが確認できます。

画像の切り替わりをとてもリッチに演出できるエフェクトが
たくさん用意されています。

実装もさほど難しくなく、<li>リストで構成されたHTMLソースを
制御するもののようです。

◆HTML
<div class="box_skitter box_skitter_large">
	<ul>
		<li>
			<a href="http://thiagosf.net"><img src="images/01.jpg" class="block" /></a>
			<div class="label_text">
				<p>Label</p>
			</div>
		</li>
		<li>
			<a href="http://cakephp.org"><img src="images/02.jpg" class="cube" /></a>
			<div class="label_text">
				<p>Label</p>
			</div>
		</li>
		<li>
			<a href="http://jquery.com"><img src="images/03.jpg" class="default" /></a>
			<div class="label_text">
				<p>Label</p>
			</div>
		</li>
	</ul>
</div>

そして実行用スクリプトは以下の様に。

◆SCRIPT
$(function(){
	$('.box_skitter_large').skitter({animation:"cubeRandom"});
});

設定できるエフェクトについては
以下の22種類(+ALL)が用意されています。
—————————–
cube
cubeRandom
block
cubeStop
cubeHide
cubeSize
horizontal
showBars
showBarsRandom
tube
fade
fadeFour
paralell
blind
blindHeight
blindWidth
directionTop
directionBottom
directionRight
directionLeft
cubeStopRandom
cubeSpread
(all)
—————————–

演出方法含め、とても参考になりそうです。

演出に凝ったスライドショーが必要になった際に是非。。。

BlackFlag
FOLLOW

Comments (0)







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

様々なエフェクトで演出できるjQueryスライドショー「Skitter」

Categories
BlackFlag are . . .
都内で活動するマークアップエンジニアによる、 Webサイト構築に関する技術やWebサービスを紹介するブログです。

jQueryをはじめとしたWebサイトを彩る技術のほか、
HTML(HTML5)、CSS(CSS3)、iPhoneやTwitterを使った実験などなど、
Webサイト制作に役立つであろうと思われる情報を備忘録として掲載しています。

About BlackFlag
BlackFlag Information
FriendshipLinks