jQueryの便利なアニメーション機能「animate」。文字通りアニメーションを行うための関数ですが、移動は出来ても回転や拡大はできません。写真をクルクル回転させてアニメーションさせたい!そんな時に使える便利なプラグインが『Animate CSS Rotation and Scale』です。
Animate CSS Rotation and Scalehttp://www.zachstronaut.com/posts/2009/08/07/jquery-animate-css-rotate-scale.htmlまずは上記ページ中段ほどにある『Download』から『jquery-css-transform.js』と『jquery-animate-css-rotate-scale.js』をダウンロードします。また、jQueryも最新版をダウンロードしておきます。
続いて<head>内に下記のように記述。jQueryは先に記述してください。
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-css-transform.js"></script>
<script type="text/javascript" src="jquery-animate-css-rotate-scale.js"></script>
続いてアニメーションさせたいオブジェクトに任意のIDをつけます。
例)画像の場合
<img src="画像ファイルパス" alt="" id="anime" />
そして下記のように記述します。
例)<a href="javascript:click();">ボタン</a>をクリックした場合
<script type="text/javascript">
function click(){
$('#anime').animate({"left": "-=100px", "top": "-=100px", rotate: '-=45deg', scale: '1.50'}, 500);
}
</script>
仕様は下記の通り。
$('任意のID').animate({"left": "左右の移動", "top": "上下の移動", rotate: '回転', scale: '拡大/縮小'}, ミリ秒もしくはfast,normal,slowによる早さ);
これによりアニメーションの幅が広がります。スマホ系の開発でとても役立ちますね。