全画面スライドを可能にするJavaScript「FerroSlider jQuery Plugin」

キーボードの→で進んでください。

全画面スライドをさせられるとサイトの遷移が面白くなり、ユーザーを惹きつけることができます。
:: Alessandro Ferrini :: FerroSlider jQuery Pluginはこれを簡単に実現できます。
また簡単にプレゼンにも流用できそうです。

sponsors

使用方法

:: Alessandro Ferrini :: FerroSlider jQuery Pluginからファイル一式をダウンロード。

    <link rel="stylesheet" href="jquery.ferro.ferroSlider.css" media="all" /> 
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript" src="jquery.ferro.ferroSlider.min.js"></script>
<script>
$(function(){
	$('.slidingSpaces').ferroSlider({
		easing		: 'easeOutExpo', //easingプラグインの設定
		createMap	: true, //いま何枚目かを表示するかどうか
		mapPosition	: 'bottom_center', //現在地を表示する場所
		feedbackArrows: true //どこに遷移したかを表示するか
	});
});
</script>
    
あとは下記を記述すれば完成です。
また設定により、上下だったり画像をフルで見せることも可能です。

    <div id="div1" class="slidingSpaces" title="Page 1">
    first page
</div>
<div id="div2" class="slidingSpaces" title="Page 2">
    second page
</div>
<div id="div3" class="slidingSpaces" title="Page 3">
    third page 
</div>
<div id="div4" class="slidingSpaces" title="Page 4">
    fourth page
</div>
<div id="div5" class="slidingSpaces" title="Page 5">
    fifth page 
</div>
    

Javascriptサンプルページ一覧
skuare.net

sponsors