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



複数のコンテンツエリアを後ろから前へ回転(渦の様に)表示してみます。
過去に紹介した、
CLOUD-CAROUSEL:複数画像を後ろから前に回転表示する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="http://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>
    <br />
	<br />

    <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

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

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