mootoolsで3Dメニュー「JavaScript 3D Cube Menu」

サイトの重要要素、メニューがこんな風にできると凄く印象的になります。
JavaScriptライブラリmootoolsを利用したJavaScript 3D Cube Menuです。

使用方法

JavaScript 3D Cube Menuからcube-menu.jsとinit-cube-menu.jsを、mootoolsからmootools.jsをダウンロードします。


<script src="mootools-1.2.1.js" type="text/javascript"></script>
<script src="cube-menu.js" type="text/javascript"></script>
<script src="init-cube-menu.js" type="text/javascript"></script>

init-cube-menu.js内にはメニューに表示する画像パスがありますので適宜調整してください。
最後に以下のように、画像の上に乗るテキストをCSSで調整すれば完成です。


.cube-text {
	position: absolute;
	padding-left: 5px;
	padding-right: 5px;
	text-decoration: none;
	color: #fff;
}

※マウスホイールで拡大・縮小も可能です。

サンプル

その辺に浮かんでいると思います。
Javascriptサンプルページ一覧

skuare.net