わざログ

2013.09.14

いろんな画像をクルックルクルックル回すイケイケjQueryプラグイン 「jQueryRotate」

  • このエントリーをはてなブックマークに追加

ライター:マツモトカズマ

気候もすっかり穏やかになり、メシウマな季節がやってきましたね。七輪の上でサンマさんが焼き焦がれていく姿を拝見しながら酒が飲みたい、そんな今日このころ。申し遅れました、3度の飯より酒浴びたい、マークアップエンジニアのマツモトです。


先日、画像をクルックルクルックル回してください(アニメーション的な)というお仕事があったので、本日はそのときに実装した回しワザの紹介をしたいと思います。回したがり屋なあなた、必見です。

デモはこちら


どうやって回すの?

方法はいくつかあって、

  • 今でもバリバリ現役、Flash使っちゃえばエエやん
  • いやいや時代の最先端はCSS3先生です
  • 困ったときはjQuery

ぐらいが新米マークアッパーの思いつく限界値です。あしからず。

3つの候補者が出そろったところで、審議!

Flash
まず1つめFlashですが、僕が育った世代では既に『Flashいらなくね?』の時代であったが故にFlashの知識やスキルか乏しい。また、Flashを使わなくても実装できるのであればそちらを優先して利用していきたい。よって、暫定3位。

CSS3
おそらく動きも比較的なめらかで、ヌメヌメ動いてくるのがCSS3です。記述も難しくないため導入も容易い。これほどの新米の味方はいないといっても過言ではないっすね、先輩。しかし、まだまだ捨てられないブラウザIE8・9では今回利用したいCSS3プロパティが未対応です。どの時代もIEがつきまとう。暫定2位。

jQuery
消去法で暫定1位に躍り出ました。やるしかないです。


Fireworksマニア

Fireworksマニア

このお仕事を受けて、思い出しました。普段から勝手にお世話になっているTipsサイトFireworksマニアです。
ヘッダー部分のきれいなお花にマウスオーバーするたびに、クルックルクルックルします。これをヒントに1つのjQueryプラグインにたどり着きました。

jQueryプラグイン:jQueryRotate

このプラグインは画像の中心を軸とした画像の回転を可能にするプラグインです。アニメーションなしの画像の傾きや、画像が回り続けるアニメーション、マウスオーバー時の画像の回転など詳細なプロパティを設定することでさまざまな動きを実行できます。

jQueryRotateはこちらのサイト上部ナビゲーションの【Downloads】よりファイルのダウンロードができます。

対応ブラウザは以下の通りです。

  • Internet Explorer 6.0
  • Firefox 2.0
  • Safari 3
  • Opera 9
  • Google Chrome

設置

本記事ではわりと実用的に使われそうな画像を傾けるマウスオーバーで画像を回転させるを解説していきます。その他エフェクトについてはデモページをご参照ください。なお、でもページでは解説すら割愛してるので開発者ツール等で探ってくださいお願いします。

HTML

HEAD部分
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="/js/jQueryRotate.js"></script>
<script type="text/javascript">
//詳細な設定を記述
$(function(){
	//1.画像を傾けてやる
	$("#img01").rotate({angle:30});

	//2.マウスオーバーで画像を回してやる
	$("#img02").rotate({ 
	bind: 
		{ 
			mouseover : function() { 
				$(this).rotate({
					animateTo: 360
				})
			},
			mouseout : function() { 
				$(this).rotate({
					animateTo: 0
				})
			}
		} 	 
	});
});
</script>
BODY部分
<!-- 1.画像を傾けてやる -->
<img src="images/rotateImage.png" id="img01">

<!-- 2.マウスオーバーで画像を回してやる -->
<img src="images/rotateImage.png" id="img02">

解説

画像を傾ける

//1.画像を傾けてやる
$("#img01").rotate({angle:30});

たったこれだけで画像が時計回りに傾きます。傾けたい対象となる画像のセレクタを指定し、rotateメソッドのangle(角度)パラメータを指定するだけで傾きます。好きな数字を入れて傾けてみてください。

マウスオーバーで画像を回す

//2.マウスオーバーで画像を回してやる
$("#img02").rotate({ 
	bind: 
	{ 
		mouseover : function() { 
			$(this).rotate({
				animateTo: 360
			})
		},
		mouseout : function() { 
			$(this).rotate({
				animateTo: 0
			})
		}
	} 	 
});

mouseover(マウスを重ねた)時の角度、mouseout(マウスを離した)時の角度をそれぞれanimateToで値を設定するだけで、回るんです。回ります。ホント。いやー便利。
まだまだ細かな設定ができるみたいなので、回すことに興味がある方はぜひお試しあれ。詳細な設定等などは本家のページに掲載されています。

長々となりましたが、これであなたも回したくなるはず。お客さんに「回してよ!」って言われてしまったときは、jQueryRotateを使ってみてください。

それでは、どろん。


でもページはこちら(社長が回ってます。あとでおこられます。)



comments powered by Disqus

関連のある記事

関連のある記事はありません
ページ先頭へ戻る