後ろから前へ回転しながら複数コンテンツエリアを表示【jquery.vortex.js】｜DAD UNION

jquery.vortex.jsを使って後ろから前へ回転しながら複数コンテンツエリアを表示する方法をご紹介します。

Contents

後ろから前へ回転しながら複数コンテンツエリアを表示するCSSの記述
jquery.vortex.jsを使って後ろから前へ回転しながら複数コンテンツエリアを表示するJavaScriptの記述
後ろから前へ回転しながらコンテンツエリアを表示するHTMLの記述
jquery.vortex.js：後ろから前へコンテンツエリアを回転表示するデモページ

後ろから前へ回転しながら複数コンテンツエリアを表示するCSSの記述

※回転表示させるエリア（#vortex）と複数コンテンツエリア（.square-button）のCSS記述です。必要に応じて変更して下さい。

<style type="text/css" media="all">
<!--
body{
	margin:0;
	padding:0;
}
h1{
	text-align:center;
	font-size:18px;
	font-weight:bold;
	padding:15px 0 10px 0;
	line-height:1.4em;
}
.clWrap{
	width:800px;
	margin:0 auto;
}
#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>

jquery.vortex.jsを使って後ろから前へ回転しながら複数コンテンツエリアを表示するJavaScriptの記述

※jquery.min.js（v1.9.1）、jquery.vortex.jsファイルを読み込みます。$(回転表示させるエリア).vortex({オプション})を記述します。オプションでは位置、スピード等を設定します。

<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>

後ろから前へ回転しながらコンテンツエリアを表示するHTMLの記述

※回転表示させるエリア（id=”vortex”）と複数コンテンツエリア（class=”square-button”）を用意します。$(回転表示させるエリア).data(‘vortex’).start()で回転をスタートさせ、$(回転表示させるエリア).data(‘vortex’).stop()で回転を停止します。必要に応じて変更して下さい。

<div class="clWrap">
    <h1>後ろから前へコンテンツエリアを回転表示</h1>

	<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-->

</div><!--/clWrap-->