こんにちは。アウラスタッフ 仁木です。
今回はウェブページでコンテンツに動きを与えるのに便利なプラグイン『KUTE.js』を紹介したいと思います。CSS3が登場してここしばらくではアニメーションはCSSのみでも多彩な動きをつけられるようになりました。それでもアニメーションさせるタイミングだったり、たくさんの要素に一連の動きの中で微妙に違う動きをつけたり、細かな挙動の設定をしたいとなるとCSSでは限界があると思います。そういった部分はjQueryの”animate”や、今回紹介する『KUTE.js』などのアニメーションのプラグインを使うとより効率的でかつ自由に動きをつけることができますね。
最初に注意として、『KUTE.js』はIE9以下では動作しませんので、IE9対応が必要な場合は別をプラグインを使ってください。

基本は「animate」関数

まずプラグインの紹介をする前にjQueryの”animate”関数を簡単に紹介したいと思います。というのも、『KUTE.js』もそうですが、アニメーション系のプラグインはjQueryの”animate”関数のパラメータを踏襲しているものが多いので”animate”の使い方をわかっていると他のプラグインにもとっかかりやすくなると思います。

animate(params, [duration], [easing], [callback])

アニメーションさせるのに必要なパラメータは「アニメーションさせるCSSプロパティ」、「アニメーション時間」、「イージング」、「コールバック」です。

“params”にはCSSプロパティを指定します。複数指定する場合は”{}”で括りカンマで区切って記述します。
注意として、”color”や”font-weight”など、数値以外の指定が必要なプロパティは対応していません。”px”や”em”、”%”などの指定ができるもののみアニメーションが可能です。
またプロパティ名は”-“を使用せずにキャメルケースで表記します（”margin-left”は”marginLeft”といった風に書きます）。

“duration”はアニメーションの時間をms単位で指定します。
“easing”はイージングのタイプを指定します。

“callback”というのはアニメーションが完了した時点で呼び出される関数を与えることが出来る引数です。javascriptは基本非同期で処理されるので、「アニメーションさせてからスライドを開始する」などといったように、イベントを同期して処理したい場合に使うとよいですね。

ちなみに「duration」、「easing」、「callback」は引数で必ず指定しなくても構いません。

コードは以下のように。

[code lang=”js”]
$(function() {
$(‘element’).animate({
top: "100px",
marginRight: "2em"
},
1500, //duration
‘swing’, //easing
callback //コールバック関数
);

function callback() {
console.log("コールバック");
}
});
[/code]

『KUTE.js』の使い方

読み込み

[code lang=”html”]
<script src="https://cdn.jsdelivr.net/kute.js/1.6.2/kute-jquery.min.js"></script> <!– jQuery Plugin –>
<script src="https://cdn.jsdelivr.net/kute.js/1.6.2/kute-css.min.js"></script> <!– CSS Plugin –>
<script src="https://cdn.jsdelivr.net/kute.js/1.6.2/kute-svg.min.js"></script> <!– SVG Plugin –>
<script src="https://cdn.jsdelivr.net/kute.js/1.6.2/kute-text.min.js"></script> <!– Text Plugin –>
<script src="https://cdn.jsdelivr.net/kute.js/1.6.2/kute-attr.min.js"></script> <!– Attributes Plugin –>
[/code]

スクリプトを読み込みます。2行目以降はCSSプロパティやSVGオブジェクトにアニメーションを付けたい場合、またはイージングをもっと細かく設定したい場合など必要に応じて読み込みませてください。

基本的な使い方

[code lang=”js”]
//設定
var tween = KUTE.fromTo($(‘selector’), {アニメーション開始時の設定}, {アニメーション終了時の設定}, {オプション});
//スタート
tween.start();
[/code]

構文は上のように書きます。
アニメーションの開始、終了の設定の箇所はanimate関数のようにプロパティを記述します。オプションはアニメーション時間、リピート、ディレイタイム、イージングなど様々なものがあります。

[codepen_embed height=”287″ theme_id=”light” slug_hash=”NdmVgd” default_tab=”result” user=”toshitaka”]See the Pen &lt;a href=’http://codepen.io/toshitaka/pen/NdmVgd/’&gt;NdmVgd&lt;/a&gt; by Toshitaka Niki (&lt;a href=’http://codepen.io/toshitaka’&gt;@toshitaka&lt;/a&gt;) on &lt;a href=’http://codepen.io’&gt;CodePen&lt;/a&gt;.[/codepen_embed]&lt;/pre&gt;

一括で動かす

[code lang="js"]

var tween1 = KUTE.allFromTo('.item',{

 translate:0,

 rotate: 0,

 borderRadius: '0%'

}, {

 translate:250,

 rotate:360,

 borderRadius: '50%'

}, {

 yoyo: true, //繰り返し時に反復の動きにする

 repeat: 1, //繰り返し回数

 duration: 1200, //アニメーションの時間

 offset: 200 //"allTo", "allFromTo"の際にアニメーションの開始を遅延させる

});

[/code]

 
、、と、触りだけ紹介しましたが、どうでしょうか。やはりプラグインを使うと自前でやると難しいことが手軽に出来るのでありがたいですね。といっても、何にでもプラグインを使うでなく、CSSで対処できるものはなるべくCSSの方が良いなと個人的には感じているので使いどころを見極めて使っていきたいと思います。