jQueryで斜めにもスライドさせる：via　jQuery faux-3D Viewport

横や縦へ要素をスライドさせるのはなんとなくわかる。
でも斜めにはどうやって？という方にその方法を紹介します。
via：nemoorange.com: jQuery faux-3D Viewport

使用方法

今回は以下のように3×3で配置した要素を一つの枠内で斜めにスライドさせてみたいと思います。

<div id="enclosure">
	<div id="panel">
		<div class="slide-wrap">1</div> 
		<div class="slide-wrap">2</div> 
		<div class="slide-wrap">3</div> 
		<div class="slide-wrap">4</div> 
		<div class="slide-wrap">5</div> 
		<div class="slide-wrap">6</div> 
		<div class="slide-wrap">7</div> 
		<div class="slide-wrap">8</div> 
		<div class="slide-wrap">9</div> 
	</div>
</div>
<style>
#panel {
  width:1800px; height:1800px; position:absolute;
}

.slide-wrap {
 float:left;  width:520px; height:320px; margin:10px; border:30px solid #DDD;
}
</style>
まずは、1つのスライドしか見えないようにCSSを調整するのと、動かすボタンを付けます。

#enclosure {
  width:600px; height:400px;overflow:hidden; position:relative;
}


<ul id="nav">
	<li><a href="#1">1</a></li>
	<li><a href="#2">2</a></li>
	<li><a href="#3">3</a></li>
	<li><a href="#4">4</a></li>
	<li><a href="#5">5</a></li>
	<li><a href="#6">6</a></li>
	<li><a href="#7">7</a></li>
	<li><a href="#8">8</a></li>
	<li><a href="#9">9</a></li>
</ul>
次に、jQueryからjquery.jsをjQuery Easing Pluginからjquery.easing.1.3.jsをダウンロードします。

<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script> 
<script type="text/javascript">
$(document).ready(function() {
	var shiftSpeed = 1500; //スライドスピード
	var SlideWidth = 600; //スライドの大きさ
	var SlideHeight = 400; //スライドの幅
	var columnCount = 3; //縦列の数
	var rowCount = 3; //横列の数

	$("ul#nav li a").click( function() {
		navIndex = $("ul#nav li a").index(this); 
		shiftBoxes( navIndex  );
	});

	function shiftBoxes(boxN) {
		var col = ( (boxN) % rowCount ) * -1; 
		var row = Math.floor( (boxN) / columnCount ) * -1; 
		$("#panel").stop().animate({
			left: SlideWidth * col,
			top: SlideHeight * row },
			shiftSpeed, "easeInOutCubic"  ); 
	}
  });
</script>
上記のようにするとクリックしたナビのindexをとり、縦横に加え、斜めにもスライドするようになります。

サンプル

one

two

three

four

five

six

seven

eight

nine


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