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

横や縦へ要素をスライドさせるのはなんとなくわかる。
でも斜めにはどうやって?という方にその方法を紹介します。
via:nemoorange.com: jQuery faux-3D Viewport
jQueryで斜めにもスライドさせる:via 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をとり、縦横に加え、斜めにもスライドするようになります。

jQueryで斜めにもスライドさせるサンプル:via jQuery faux-3D Viewport

sponsors

「jQueryで斜めにもスライドさせる:via jQuery faux-3D Viewport」をシェアする

記事作成:
記事URL:

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