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 = 'https://black-flag.net/';
});
});
});
},1000);
});
});
</script>
まず始めに「.css()」に transform:’scale()’ の値を指定して
「.animate()」のアニメーション指定で scale の値を変化させています。
次に、「scale」＋「rotate」の値を操作したズーム＆回転アニメーションパターン。
※下記画面の「START」を押してみてください。
この「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 = 'https://black-flag.net/';
});
});
});
},1000);
});
});
</script>
まず始めに「.css()」に transform:’rotate() scale()’ の値をそれぞれ指定して
「.animate()」のアニメーション指定で rotate と scale の値を変化させています。
この様な感じで「jquery-css-transform.js」と「jquery-animate-css-rotate-scale.js」の
2つのプラグインを組み合わせることで、
拡大／縮小や回転といったCSSアニメーションを
ｊQueryアニメーションで手軽に実装できるようになります。
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 = 'https://black-flag.net/';
});
});
});
},1000);
});
});
</script>
「.css()」とは別に「.transform()」メソッドに rotateX の値を指定して
「.animate()」のアニメーション指定で rotateX の値を変化させています。
次に、一つ目に紹介したものと同じく
こちらのプラグインを使って同様に「scale」の値を操作したズームアニメーションパターン。
※下記画面の「START」を押してみてください。
この「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 = 'https://black-flag.net/';
});
});
});
},1000);
});
});
</script>
「.css()」とは別に「.transform()」メソッドに scale の値を指定して
「.animate()」のアニメーション指定で scale の値を変化させています。
最後に一つ目に紹介したものと同じく
こちらのプラグインを使って同様に「scale」＋「rotate」の値を操作したズーム＆回転アニメーションパターン。
※下記画面の「START」を押してみてください。
この「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 = 'https://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を実装させる際に是非。。。