観覧車のように回るアニメーションメニュー「Jquery Interactive Animated Menu」


Jquery Interactive Animated Menu

メニューがゆっくり回転するアニメーションになっています。
この「Jquery Interactive Animated Menu」を利用すれば簡単に実現できます。

CSSや画像を少し変更するだけでも、ユニークなトップページが作れますので、専門的な知識がなくても使われている画像を変更したりして利用できると思います。ポートフォリオ用のサイトにも適してそうですね。

サンプルを作ってみました。

→ 観覧車のように回るアニメーションメニュー「Jquery Interactive Animated Menu」サンプル


サンプルは使われている画像を変更しただけです。

最新のブラウザに対応していますので、古いブラウザでは動作しない場合があります。

この「Jquery Interactive Animated Menu」の入手方法と利用方法は続きをどうぞ。





【使用方法】
まずは、こちらのJquery Interactive Animated Menuのサイトからファイルを一式ダウンロードします。

HEAD部分にCSSとJavaScriptを読み込む記述します。


続いてBody部分にメニューを表示させ回転させる記述をしましょう。


センターに使用する画像は、幅200pxx高さ200px以内くらいが適してるようです。周囲のサークルに使用する画像は60x60pxくらいが適当でしょうか。どちらもPNGファイルで背景を透過させた画像を使用したら綺麗ですね。

最後にサンプルのソースを書いておきます。ご参考まで。

この記事と関連してると思われる記事:


1 Comment

  1. 深野暁雄

    2016/06/14 at 6:07 PM

    いつも参考になるチュートリアルをありがとうございます。このページの「Jquery Interactive Animated Menuのサイトからファイルを一式ダウンロードします。」がダウンロードできないのですが、データをお持ちでないでしょうか?よろしくお願いします。

コメントを残す

Your email address will not be published.

*