WordPressアップデートによるテーマファイル構成の不具合により、現在は仮のテーマで表示しています。
記事など読みづらいところが多々あると思いますがご了承いただけると幸いです。
鋭意修正中です…

jQueryでの3D表現「jQuery faux-3D Viewport」

実際にどう使うかはまったくイメージしていないものですが、
jQueryでの3D的表現を試みている「jQuery faux-3D Viewport」が
ちょっとおもしろかったのでご紹介。

jQueryfaux-3D Viewport.jpg
nemoorange.com: jQuery faux-3D Viewport

大中小の枠を重ね合わすことで立体的な視覚表現を生み、
コントローラーによって枠を移動させ、3D動作的な見た目を実現しています。

あれこれ説明するより、下記の1~9までをクリックしてみてください。

これが何かに使えるかどうかは別として、
動きが滑らかで心地良い。
jQueryを使っての画面上での斜め移動としての参考にもなりそうです。

使用するファイルはjQuery+「easing.js」ライブラリだけ。
動作に必要なスクリプトを載せておくと、
————————————–
<script type=”text/javascript”>
$(document).ready(function(){

var shiftSpeed = 1500;

var bigSlideWidth = 400;
var bigSlideHeight = 400;
var smallSlideWidth = 300;
var smallSlideHeight = 300;
var tinySlideWidth = 200;
var tinySlideHeight = 200;
var columnCount = 3;
var rowCount = 3;

//$(“#enclosure”).css({backgroundColor: “#ddd”});

$(“ul#nav li a:eq(4)”).css({fontWeight: “bold”});

//$(“#big-panel”).css({backgroundColor: “#ddd”});

function shiftBoxes(boxN) {
var col = ( (boxN) % rowCount ) * -1;
var row = Math.floor( (boxN) / columnCount ) * -1;
$(“#big-panel”).stop().animate({ left: bigSlideWidth * col, top: bigSlideHeight * row }, shiftSpeed, “easeInOutCubic” );
$(“#small-panel”).stop().animate({ left: smallSlideWidth * col +50, top: smallSlideHeight * row +50 }, shiftSpeed, “easeInOutCubic” );
$(“#tiny-panel”).stop().animate({ left: tinySlideWidth * col +100, top: tinySlideHeight * row +100 }, shiftSpeed, “easeInOutCubic” );
}

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

</script>
————————————–
こんな感じです。

ご参考までに。。。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です