こんにちは☆最近すっかり涼しくなりましたね…！
みなさん、体調など崩していませんか？？
さて、今日は画像を回転させられる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でアニメーションさせた静的なサイトという記事で紹介されていた
こちらのサイトのロゴ部分もjQuery.rotate.jsを使って
ポヨンと回転させているそうです。
かわいい♪♪
ほかにもアイディア次第でいろいろ使えそうなプラグインですね☆