jquery.vortex.js：後ろから前へコンテンツエリアを回転表示

複数のコンテンツエリアを後ろから前へ回転表示してみます。

1．CSSの記述例

（以下は調整してみて下さい）

<style type="text/css" media="all">
<!--
#vortex {
	width: 350px;
	height: 250px;
	position: relative;
	z-index: 0;
}
#vortex {
	width: 400px;
	height: 300px;
	position: relative;
	z-index: 0;
	margin:0 auto;
}
.square-button{
	background:linear-gradient(to bottom, #606C88 0%, #3F4C6B 100%) repeat scroll 0 0 transparent;
	width:120px;
	height:120px;
} 
-->
</style>

2．読込むJsとJavaScriptの記述例

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.vortex.js"></script>
<script type="text/javascript">
$(window).load(function() {
	$('#vortex').vortex({
		initialPosition: 270,
		speed: 150,
	    deepFactor: 0.8
	});
});
</script>

3．HTMLの記述例

<div align="center">
        <button id="vortex-start" type="button" onclick="$('#vortex').data('vortex').start();">開始</button>  
        <button id="vortex-stop" type="button" onclick="$('#vortex').data('vortex').stop();">停止</button>
</div>

    
	


<div id="vortex">

<div class="square-button"></div>


<div class="square-button"></div>


<div class="square-button"></div>


<div class="square-button"></div>


<div class="square-button"></div>


<div class="square-button"></div>


<div class="square-button"></div>

</div>
<!--/vortex-->

jquery.vortex.js：後ろから前へコンテンツエリアを回転表示するデモ

ソース元：jQuery Vortex

色々とオプションを指定できる様ですね。

用途的には同使おうか悩みますね。