heart-67841_640

スタンダードでは要素が奥行きがあるようにくるくる回転しますが、プラグインで3Dのように回転させたり、要素のまわりを回転させたりといろんなパターンで回転して見せる事ができます。

jQuery「RoundAbout」

まずは、デモをご覧ください。

対応ブラウザ Google Chrome / Safari / Firefox / Opera / InternetExplorer

ご覧いただけましたか? 標準は水平方向(横)に動くものとなっています。

基本的な使い方は凄く簡単です。 まずはこちらから RoundAbout をダウンロードします。

ダウンロード : RoundAbout

使い方

1. jQuery本体とRoundAboutファイルをheader内に記述し読み込みます。

2. 続けて下記のように記述します。

header内には、以上を記述すれば終了です。 続いてHTMLの記述です。

3. ulのリスト形式で記入し、回転させたいものをliの中に記入します。

4. あとはCSSで装飾をするだけです。(これは、デモでのCSSです。)

jQuery「RoundAbout」 プラグイン

プラグインを使うと回転方向や3Dのように回転させたりすることが出来ます。

回転方向を扱うShapes

回転方向を扱うShapesを使ったデモ (縦方向の回転です。)

対応ブラウザ Google Chrome / Safari / Firefox / Opera / InternetExplorer

まずは、プラグインをダウンロード

ダウンロード : Roundabout Shapes for jQuery

使い方は、基本と一緒ですが、呼び込むファイルが増えます。

続けて書く部分も一緒ですが、縦方向の動作を付け足して記述してあげます。

その他にも、上に書いてあるダウンロードサイトへいくと斜め方向などのいろいろな回転について書かれています。 続けて書く部分を変更してあげるだけで、3Dや斜め方向の動きなどが出来ます。

上記のデモは、こちらからダウンロードできます。

水平方向のサンプルをダウンロードする
垂直方向のサンプルをダウンロードする

ADVERTISEMENT

Author:

follow FacebookPage

当ブログがお気に召しましたら是非いいね!をお願いします!

Follow Me

閲覧頂きありがとうございました:)

Message

トップへ戻る