JavaScript

jQueryRotate.js：画像を回転させるアニメーション演出

  /

jQueryRotate.jsを使って画像を回転させるアニメーション演出を表示する方法をご紹介します。
（ブラウザの種類やバージョンによってもしかすると動かない可能性もありますが、探した中ではこれが一番多くのブラウザに対応していた様に思います）

Contents
  1. jQueryRotate.jsを使ったJavaScriptの記述
  2. 回転する画像のHTML記述
  3. jQueryRotate：画像を回転させるjsデモページ

jQueryRotate.jsを使ったJavaScriptの記述

※jqueryとjQueryRotate.jsを読み込みます。回転させたい画像エリアと角度を$().rotate()を使って設定します。setInterval()で繰り返します。

<script type="text/javascript" src="js/jquery-1.3.js"></script>
<script type="text/javascript" src="js/jQueryRotate.js"></script>
<script type="text/javascript">
<!--
$(document).ready(function(){
	var r = 5;	//回転角度
	setInterval(function(){
	$("#idLogo").rotate(r);
		r = r + 0.1;
	}, 20);

});
-->
</script>

回転する画像のHTML記述

※回転させる画像（id=”idLogo”）を用意します。

<h1 id="site-title" style="text-align:center; padding-top:50px; font-size:16px;">
<img id="idLogo" src="logo.jpg" alt="回転用画像イメージ" />
</h1>

jQueryRotate：画像を回転させるjsデモページ

jQueryRotate：画像を回転させるjsデモ

ソース元：jqueryrotate

　
※流用される場合は自己責任でお願いします。
　デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。

jQueryRotate.js 画像回転
RELATED POST