JavaScriptライブラリ「mootools」で3Dぐるぐるさせる

｜ ｜ ｜ ｜ ｜ ｜

最近、英語で言うところのcarousel（回転木馬）と言われる画像をぐるぐる回すのがはやっています。
これをJavaScriptライブラリ「mootools」を使用して3Dにした「Mootools 3D Carousel」を紹介します。

使用方法 Mootools 3D Carouselから3dcarousel.jsを、mootoolsからmootools.jsをダウンロードします。
<script type="text/javascript" src="http://yourdomain/mootools.js"></script>
<script type="text/javascript" src="http://yourdomain/3dcarousel.js"></script>
上記を記述したらぐるぐるさせたい画像を以下のように書けば完成です。
<div id="carousel">
<div><a href="リンク先"><img src="画像パス"></a></div>
画像分
</div>
JavaScriptライブラリ「mootools」で3Dぐるぐるさせるサンプル

2008年10月13日

前の記事：ファイルサイズをJavaScriptライブラリ「jQuery」で自動表示する「addSizes.js」
次の記事：モバイルサイトに関するサイト19

関連記事

• セクシーなLightBoxを実現するJavaScript「Sexy LightBox」
• [mootools]mooVRotatingMenu
• [mootools]SimpleViewGallery
• [mootools]Slide Show
• [mootools]MooPiX

• チラ見せしちゃうJavaScript「Page Peel」
• 入力内容の絞込みを行うJavaScript「Live Filter」
• JavaScriptライブラリ「jQuery」で、いい動きのスライダーを作る「Start/Stop Slider」
• お手軽にタブ切り替えを行うJavaScript「Spotlight」
• 2008年アクセスランキング
• jQueryプラグイン「pikachoose」で小気味良いスライドショーを作る
• jQueryで画像に反射効果を！「Reflection.js for jQuery」
• jQueryでニュースティッカーを作成するJavaScript「JqNews」
• JavaScriptライブラリ「jQuery」でカレンダーを表示する「dynDateTime」
• 画像のキャプションをクールに表示するJavaScript「jQuery Captify Plugin」