jQueryを使ったアニメーションではCSSのプロパティ値を操作することによって
ページ上に様々なバリエーションのアニメーションを簡単に実装することが可能になりますが
現状(ver.1.8)のデフォルト状態でのjQueryファイルでは
CSS3のTransform系の回転「rotate」や拡大縮小「scale」といった
アニメーション値を操作することはできません。

そんなCSS3のTransform関連のプロパティ値を
jQueryアニメーションとして操作させることを可能とするプラグインがいくつかあったので
使いやすかったものをサンプルアニメーションを交えて紹介してみます。

jquery-css-transform.js / jquery-animate-css-rotate-scale.js

jQueryでCSS3のTransformアニメーションを操作させるプラグインはいくつかありますが
その中でも使いやすかったものとして
「jquery-css-transform.js」と「jquery-animate-css-rotate-scale.js」の
この2つのプラグインファイルを組み合わせて使うことで
とても簡単にTransformアニメーションを実装することができました。

・jquery-css-transform.js
zachstronaut/jquery-css-transform・GitHub

・jquery-animate-css-rotate-scale.js
zachstronaut/jquery-animate-css-rotate-scale・GitHub

これらのプラグインを使うことによって

◆SCRIPT
$(●●●●).css({transform:'rotate(360deg) scale(2)'}).animate({rotate:'0deg',scale:'1'},1000,'linear');

この様に、CSS値で「transfrom」の値をセットして
「.animate()」アニメーションで値を変化させることで
操作させることが可能になります。

これらのプラグインを使って試に作ってみた
簡単なCSSアニメーションサンプルをいくつか紹介してみます。
※もちろんCSS3非対応ブラウザでは動作しません。。

サンプルのHTML/CSSはすべて以下の共通のものを使用します。

◆HTML
<div id="container">
<div id="opening"><img src="img/title1.png" width="280" height="90" alt="" id="title1"><img src="img/title2.png" width="650" height="90" alt="" id="title2"></div>
</div><!--/#container-->
◆CSS
#container {
	padding: 20px 0;
	width: 100%;
	text-align: center;
}

#opening {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #000;
	position: absolute;
	z-index: 100;
	overflow: hidden;
}
#opening img#title1 {
	margin-top: -45px;
	margin-left: -140px;
	top: 50%;
	left: 50%;
	width: 280px;
	height: 90px;
	position: absolute;
	visibility: hidden;
}
#opening img#title2 {
	margin-top: -45px;
	margin-left: -325px;
	top: 50%;
	left: 50%;
	width: 650px;
	height: 90px;
	position: absolute;
	visibility: hidden;
}

まずは単純な「scale」の値を操作したズームアニメーションパターン。
※下記画面の「START」を押してみてください。

残念ながら先日公開されたFirefox16以降はこのプラグインは使用できなくなっているもようです。
Firefoxでの正常な動作は16以前のバージョンでご確認いただけます…

「scale」サンプルを別枠で表示する※別枠表示ではオープニングムービー風にしてアニメーション終了後は当ブログへリンクします。

この「scale」アニメーション動作のスクリプトは
以下の様な書き方になっています。

◆SCRIPT
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="js/jquery-css-transform.js"></script>
<script src="js/jquery-animate-css-rotate-scale.js"></script>
<script>
$(function(){
	$(window).load(function(){
		setTimeout(function(){
			$('#title1').css({visibility:'visible',opacity:'0',transform:'scale(20)'}).animate({opacity:'1',scale:'1'},200,'linear').animate({opacity:'1',scale:'0.7'},2500,'linear').animate({opacity:'0',scale:'0'},150,'linear',function(){
				$('#title2').css({visibility:'visible',opacity:'0',transform:'scale(20)'}).animate({opacity:'1',scale:'1'},200,'linear').animate({opacity:'1',scale:'0.7'},2500,'linear').animate({opacity:'0',scale:'0'},150,'linear',function(){
					$('#opening').animate({opacity:'0'},1500,'linear',function(){
						location.href = 'http://black-flag.net/';
					});
				});

			});
		},1000);
	});
});
</script>

まず始めに「.css()」に transform:’scale()’ の値を指定して
「.animate()」のアニメーション指定で scale の値を変化させています。

次に、「scale」+「rotate」の値を操作したズーム&回転アニメーションパターン。
※下記画面の「START」を押してみてください。

「scale」+「rotate」サンプルを別枠で表示する

この「scale」+「rotate」アニメーション動作のスクリプトは
以下の様な書き方になっています。

◆SCRIPT
<script src="js/jquery-css-transform.js"></script>
<script src="js/jquery-animate-css-rotate-scale.js"></script>
<script>
$(function(){
	$(window).load(function(){
		setTimeout(function(){
			$('#title1').css({visibility:'visible',opacity:'0',transform:'rotate(-360deg) scale(20)'}).animate({opacity:'1',rotate:'0deg',scale:'1'},200,'linear').animate({opacity:'1',scale:'0.7'},2500,'linear').animate({opacity:'0',rotate:'360deg',scale:'0'},150,'linear',function(){
				$('#title2').css({visibility:'visible',opacity:'0',transform:'rotate(360deg) scale(20)'}).animate({opacity:'1',rotate:'0deg',scale:'1'},200,'linear').animate({opacity:'1',scale:'0.7'},2500,'linear').animate({opacity:'0',rotate:'-360deg',scale:'0'},150,'linear',function(){
					$('#opening').animate({opacity:'0'},1500,'linear',function(){
						location.href = 'http://black-flag.net/';
					});
				});

			});
		},1000);
	});
});
</script>

まず始めに「.css()」に transform:’rotate() scale()’ の値をそれぞれ指定して
「.animate()」のアニメーション指定で rotate と scale の値を変化させています。

この様な感じで「jquery-css-transform.js」と「jquery-animate-css-rotate-scale.js」の
2つのプラグインを組み合わせることで、
拡大/縮小や回転といったCSSアニメーションを
jQueryアニメーションで手軽に実装できるようになります。

jQueryの対応バージョンと対応ブラウザはについては
————————————
・jQuery 1.3.1+
・IE 9+
・Firefox 3.5+
・Safari
・Chrome
————————————
となっており、IE9でもちゃんと正常に動作しています。
※Firefoxは「3.5+」となっていますが、残念ながら先日公開されたFirefox16以降は
接頭語の有無の関係からか、このプラグインは正常に動作しなくなってしまっているようです。

これら2つのプラグインはとても使いやすく便利なのですが
残念ながら「rotateX」や「rotateY」といった
X軸/Y軸の値を操作したアニメーションには対応していないようなので
「rotateX」や「rotateY」を使ったアニメーションを組み込む場合には
まったく別のプラグインを使う必要があります。

続いては「rotateX」や「rotateY」のアニメーションにも対応しているプラグイン。

jquery.transform.js

・jquery.transform.js
eenox/jQuery-3D-transform・GitHub

こちらのプラグインでは

◆SCRIPT
$(●●●●).transform({rotateZ:'360deg',scale:'2'}).animate({rotateZ:'0deg',scale:'1'},1000,'linear');

この様に、transform値をメソッドとしてセットして
.animateアニメーションで変化させる値をセットすることで
操作させることが簡単に可能になっているようです。

こちらのプラグインを使って試に作ってみた
簡単なCSSアニメーションサンプルもいくつか紹介してみます。
(HTML/CSSは一つ目に紹介したものと同じです)

まずは「rotateX」や「rotateY」の値を操作したアニメーション
※下記画面の「START」を押してみてください。

「rotateX」+「rotateY」サンプルを別枠で表示する

この「rotateX」+「rotateY」アニメーション動作のスクリプトは
以下の様な書き方になっています。

◆SCRIPT
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="js/jquery.transform.js"></script>
<script>
$(function(){
	$(window).load(function(){
		setTimeout(function(){
			$('#title1').css({marginLeft:'-1000px',visibility:'visible',opacity:'0'}).transform({rotateX:'-70deg'}).animate({marginLeft:'-250px',opacity:'1'},200,'linear').animate({marginLeft:'-200px',rotateX:'0deg'},1000,'linear').animate({marginLeft:'-150px',rotateY:'360deg'},1500,'linear').animate({marginLeft:'-100px',rotateX:'70deg'},1000,'linear').animate({marginLeft:'1000px',opacity:'0',rotateX:'90deg'},200,'linear',function(){
				$('#title2').css({marginLeft:'1000px',visibility:'visible',opacity:'0'}).transform({rotateX:'70deg'}).animate({marginLeft:'-200px',opacity:'1'},200,'linear').animate({marginLeft:'-250px',rotateX:'0deg'},1000,'linear').animate({marginLeft:'-300px',rotateY:'360deg'},1500,'linear').animate({marginLeft:'-350px',rotateX:'-70deg'},1000,'linear').animate({marginLeft:'-1000px',opacity:'0',rotateX:'-90deg'},200,'linear',function(){
					$('#opening').animate({opacity:'0'},1500,'linear',function(){
						location.href = 'http://black-flag.net/';
					});
				});

			});
		},1000);
	});
});
</script>

「.css()」とは別に「.transform()」メソッドに rotateX の値を指定して
「.animate()」のアニメーション指定で rotateX の値を変化させています。

次に、一つ目に紹介したものと同じく
こちらのプラグインを使って同様に「scale」の値を操作したズームアニメーションパターン。
※下記画面の「START」を押してみてください。

「scale」サンプルを別枠で表示する

この「scale」アニメーション動作のスクリプトは
以下の様な書き方になっています。

◆SCRIPT
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="js/jquery.transform.js"></script>
<script>
$(function(){
	$(window).load(function(){
		setTimeout(function(){
			$('#title1').css({visibility:'visible',opacity:'0'}).transform({scale:'20'}).animate({opacity:'1',scale:'1'},200,'linear').animate({opacity:'1',scale:'0.7'},2500,'linear').animate({opacity:'0',scale:'0'},150,'linear',function(){
				$('#title2').css({visibility:'visible',opacity:'0'}).transform({scale:'20'}).animate({opacity:'1',scale:'1'},200,'linear').animate({opacity:'1',scale:'0.7'},2500,'linear').animate({opacity:'0',scale:'0'},150,'linear',function(){
					$('#opening').animate({opacity:'0'},1500,'linear',function(){
						location.href = 'http://black-flag.net/';
					});
				});

			});
		},1000);
	});
});
</script>

「.css()」とは別に「.transform()」メソッドに scale の値を指定して
「.animate()」のアニメーション指定で scale の値を変化させています。

最後に一つ目に紹介したものと同じく
こちらのプラグインを使って同様に「scale」+「rotate」の値を操作したズーム&回転アニメーションパターン。
※下記画面の「START」を押してみてください。

「scale」+「rotate」サンプルを別枠で表示する

この「scale」+「rotate」アニメーション動作のスクリプトは
以下の様な書き方になっています。

◆SCRIPT
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="js/jquery.transform.js"></script>
<script>
$(function(){
	$(window).load(function(){
		setTimeout(function(){
			$('#title1').css({visibility:'visible',opacity:'0'}).transform({rotateZ:'-360deg',scale:'20'}).animate({opacity:'1',rotateZ:'0deg',scale:'1'},200,'linear').animate({opacity:'1',scale:'0.7'},2500,'linear').animate({opacity:'0',rotateZ:'360deg',scale:'0'},150,'linear',function(){
				$('#title2').css({visibility:'visible',opacity:'0'}).transform({rotateZ:'360deg',scale:'20'}).animate({opacity:'1',rotateZ:'0deg',scale:'1'},200,'linear').animate({opacity:'1',scale:'0.7'},2500,'linear').animate({opacity:'0',rotateZ:'-360deg',scale:'0'},150,'linear',function(){
					$('#opening').animate({opacity:'0'},1500,'linear',function(){
						location.href = 'http://black-flag.net/';
					});
				});

			});
		},1000);
	});
});
</script>

「.css()」とは別に「.transform()」メソッドに rotateZ scale の値を指定して
「.animate()」のアニメーション指定で rotateZ scale の値を変化させています。

この様な感じで最初に紹介したプラグイン同様に、
拡大/縮小や回転といったCSSアニメーションに加えて
こちらでは「rotateX」や「rotateY」のX軸/Y軸の値を操作したアニメーションも
手軽に実装できるようになります。

jQueryの対応バージョンと対応ブラウザはについては
————————————
【3D animations】
・IE 10+
・Firefox 10+
・Safari 4+
・Chrome 12+
・iOs Safari 3.2
・Android Browser 3+

【2D animations】
・IE 9+
・FireFox 3.5+
・Safari 3.1+
・Chrome
————————————
となっており、
残念ながら「rotateX」や「rotateY」の回転などを使ったアニメーションは
IE9が非対応になっています。

jQueryのバージョンも「1.8系」では動作しなかったので
「1.7.2」までのバージョンで実装する必要があります。

以上、
2通りのjQueryアニメーションでCSS3のTransformを実装させるプラグインの紹介でした。

これらをjQueryで制御するメリットはアニメーションの開始時や終了時などの
実行タイミングを容易に制御できることかと。
制作/実装する際の対象ブラウザや、どのようなアニメーションを実現させるか、
によってそれぞれのプラグインを使い分ける必要もでてくるかと思っています。

この記事を書き終わって公開するまでの間にFirefox16がリリースされ、
始めに紹介している「jquery-css-transform.js」「jquery-animate-css-rotate-scale.js」プラグインが
残念ながらFirefox16以降は正常に動作しなくなってしまいました…。
これらのプラグインを使用する状況によって、ブラウザごとに判別処理を入れて動作を切り替えたり
何かしらの別途処理を加える必要が出てきてしまうかと思われます。。。

jQueryアニメーションでCSS3のTransformを実装させる際に是非。。。

サンプルファイルをダウンロードしたい方はこちらから

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

Related Posts

Comments (4)

  • opp | 2012.11.01 21:19

    こんばんは、

    アップデートされたみたい > jquery-animate-css-rotate-scale.js
    動作確認はしてないっす

    https://github.com/zachstronaut/jquery-animate-css-rotate-scale/commits/master

  • BlackFlag | 2012.11.02 1:00

    >oppさん

    情報ありがとうございます!

    ちゃんとアップデートされたみたいでほんとよかったです。
    早速、いろいろ検証してみます!

    よろしくお願いします。

    ※2012/11/6追記
    検証してみたところ、、、
    残念ながらアップデート版もFirefox16+では正常には動作してくれませんでした・・・

  • hoge | 2012.11.22 20:55

    2012/11/22にアップデートされたデータで確認しましたー。

    挙動(アニメーション)はすこし変でしたが、一応アニメーション終わりの表示は大丈夫でしたー。

  • BlackFlag | 2012.11.25 1:40

    >hogeさん

    アップデート情報ありがとうございます!
    またあれこれ検証して動作確認してみます!

    よろしくお願いします。







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

jQueryアニメーションでCSS3のTransformを操作して拡大縮小/回転などを実装させるいろいろ

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Tweets
Books
  • jQuery Technical Note
  • 外掛OUT! jQuery 高手精技
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR