jquery.rotate.js を使って、画像がクルクル回るWelcome作ってみました♪


こんにちは☆最近すっかり涼しくなりましたね…!
みなさん、体調など崩していませんか??

さて、今日は画像を回転させられるjQueryのプラグイン、
jQuery rotateというプラグインを使ってみましたので、そちらをご紹介したいと思います♪

このブログのメイン画像、
これまでは水中から撮った水の写真を使用していたのですが、
長かった夏も終わって涼しくなってきたので衣替えしてみました♪

追記:今はデザインを変更していて、同じ方法で切手風のデザインをクルクルしています。

Fireworksマニアではお花をクルクルしています♪ →Fireworksマニア

お花で出来たWelcome文字です♪

この部分、ただの画像がぺたっと貼ってあるだけではなく、
画像を回転させられるjQueryのプラグイン、jQuery.rotate.jsを使用してそれぞれのお花がマウスオーバーで回転する、という仕掛けになっています。

ぜひ、ページ上部のWelcome!と書いてあるお花をさわってみてください♪
くるくると動きませんか??^^

簡単で楽しく、使いやすいプラグインだったのですが、
今回のレイアウトではIE対応で少しつまずいたところがあったので作業工程とともにメモしておきます。

使用したjQueryプラグインはこちら↓

jQuery.rotate.js
http://wilq32.adobeair.pl/jQueryRotate/Wilq32.jQueryRotate.html

jqueryとこちらのプラグインを読み込み、ページのサンプルにあるようにコードを書いてあげると動きます。

今回は3番目のサンプル、マウスカーソルを当てると右に回転し、離すと左に回転する

という処理と同じことをしています。

このブログでは、すべてのお花にrotateFlowerというclassをあててあるので
rotateFlowerに対して以下のように処理をかけています。

$(document).ready(function() {
  $('.rotateFlower').rotate({maxAngle:30,minAngle:-30,
    bind:
    [
      {"mouseover":function(){$(this).rotateAnimation(30);}},
      {"mouseout":function(){$(this).rotateAnimation(0);}}
    ]
  });
});

お花の画像はひとつひとつ、画像の中心とお花の中心をあわせて書き出しました。
(上手く中央をあわせないと傾いて回転してしまうので)

↑こんな感じ

これでfirefoxでは完璧だったのです。
IEが…………………。

↑こんなことに。

イヤーーーーーーー!!!!

それぞれのお花の部分は
親要素(ヘッダーイメージ用ボックス)にposition:relative;
子要素(お花ひとつひとつ)にposition:absolute; top:XXpx; left:XXpx;という形で絶対位置で並べているのですが…

プラグインを有効にするとIEだとどーーーーーしても上手く並ばない……………。
プラグインを外すと上手く並ぶんです。

このプラグイン、img要素を
IEではrvmlを使って、それ以外はcanvasを使って
それぞれ書き換えてくれてて、それでアニメーションを実現しているみたいなので、
書き換えられたときに何か起こっている…

事件は現場で…

…。

ということで、調べてみたところ
img要素をvmlに変換する処理をする際、プラグイン側で
親要素にあたるボックスにposition:absolute;をかけるという処理が入ってました。

この並べ方をするには親要素はposition:relative;にしておかなければいけないので
CSSでposition:relative;していたのですが、
プラグイン側で要素のCSS設定が上書きされてしまっていたため、
子アイテムの絶対配置ができていなかったのが原因でした。

※ボックスの絶対位置、相対位置について??な方はは詳しくはこのページが詳しいですよー☆
http://www.css-lecture.com/log/css/037.html

なのでプラグインの該当の箇所を修正して完了。

今はIEでもきちんと動いていると思います♪

画像の要素をたくさん重なりあうように並べたいときは、この部分、要注意です。

上にも書きましたが、このプラグイン、

img要素を
・IEではrvmlを使って
・それ以外はcanvasを使って

それぞれ書き換えてくれてて、それでアニメーションを実現しているみたい。

HTML5のcanvas要素はIEなどでは使えないけれど、
こうやって切り分けることによって
同じ様に見せることができるのですね…!!

こういうのを思いつく人は本当にすごいなぁ><

サンプルにはない雰囲気のものが作れたので満足です♪

また、CREAMUさんのjQueryでアニメーションさせた静的なサイトという記事で紹介されていた

http://www.g2geogeske.com/

こちらのサイトのロゴ部分もjQuery.rotate.jsを使って
ポヨンと回転させているそうです。

かわいい♪♪

ほかにもアイディア次第でいろいろ使えそうなプラグインですね☆


こちらの記事もおすすめです

このブログで人気の記事です

コメント(Facebookのコメント機能を利用しています)

»

«


↓その他運営中のサイトのご紹介

Fireworksマニア Webサイトからカラーを抽出!分析!Web Site Color Picker PHOTO STOCKER -高解像度の無料写真素材- 壁紙カレンダー -デスクトップを飾る、サイズ豊富なデスクトップ壁紙- シンプルパターン研究所 -PhotoshopやFireworksで便利に使えるテクスチャ素材-
スタイルシート見出しメーカー -好きな色で作れる、あなた用のCSS見出し- ビビッドカラーズ -キュートなホームページ素材配布サイト- Android用の壁紙無料ダウンロードサイト Webデザイナー山口有由希のポートフォリオサイト