PAGE TOP

画像を回転させるjQueryプラグイン「jQueryRotate.js」

\(^o^)/

画像やテキストなど要素を回転させる効果を得ることが出来るjQueryプラグイン。背景やロゴなどのワンポイントにおすすめです。

DOWNLOAD

設置方法

まずはダウンロードしたjQueryファイルをヘッダに読み込みます。

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="<?php bloginfo('template_url')?>/js/jQueryRotate.js"></script>

ヘッダにコントロールパラメーターを記述

var angle = 0;
setInterval(function(){
	angle+=1;
	$("#rotate").rotate(angle);
},50);

各設定の説明

1行目、「var angle」は最初の角度の設定。0で正位置からのスタートです。
3行目、「angle+=1」は、回転方向と速度の設定です。+が時計回り、-が反時計回りです。速度の数値は1が一番遅く、数字を大きくすると早く回転します。
あんまり早くし過ぎてもスムーズに動かないので、ちょうどいいところをさがしてみてください。
4行目「$(“#○○”)」にIDを任意で決定し、要素に対してidを付けてあげれば回転します。

HTML

<p id="rotate">回転するテキスト</p>
<img src="○○画像のURL" id="rotate" />

上のサンプルは、複数の画像を使ってpositon:relative,absoluteで位置を決めて重ねたりしています。
各画像にidを付けて回転速度や回転方向などを指定しています。

サイトの背景にどーんとでっかいシェイプ画像を配置して回転させているサイトデザインを考えたことがあるのですが、IE8でうまく表示出来ず諦めました。positionとの相性が悪いです。IE9以降は問題なし。
実際のこのページをIE8で見ると、position指定が効かずに各図形画像がとっ散らかってます。なんか方法はあるのでしょうか?プラグインファイルソースにはバグフィックスが記述してありますがIE8には効きません。
なので、positionは使わないで、サイトのアクセント・ワンポイント的な装飾で使用してみてはいかがですか?


同じカテゴリのおすすめ記事

  • カテゴリー

  • 最近の投稿

  •