複数のコンテンツエリアを後ろから前へ回転表示してみます。
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
色々とオプションを指定できる様ですね。
用途的には同使おうか悩みますね。