[JS]jQueryを使って、超スムーズなCSS3アニメーションを実装する -jQuery Transit

昨日に続いて、jQueryとCSS3アニメーションのコラボです。
今回紹介するのは、jQueryでCSS3アニメーションを超スムーズにするように助けるプラグインです。

jQuery Transit
デモページ

[ad#ad-2]

• jQuery Transitの使い方
• jQuery Transitのデモ
• jQuery Transitの対応ブラウザ

jQuery Transitの使い方

「jquery.js」の後に当スクリプトを外部ファイルとして記述します。

外部ファイル

<script src='jquery.js'></script>
<script src='jquery.transit.js'></script>

あとはjQueryの「.animate」の代わり、「.transiton」を使用してアニメーションを実装します。

$('...').transition

jQuery Transitのデモ

その豊富で楽しいデモをご紹介。

Translate (move)

ホバーすると、ボックスがX軸Y軸に沿って移動します。

Rotation

ホバーすると、ボックスが回転します。

Skew

ホバーすると、ボックスが斜めになります。

Scale

ホバーすると、ボックスのサイズが水平・垂直方向に拡大します。

3D rotation

ホバーすると、ボックスがぺろっと回転します。

※Webkit系ブラウザのみです。

[ad#ad-2]

Transitions for other properties

他のプロパティをアニメーションさせることもできます。

ここでは、不透明度(opacity)、マージン(marginLeft)、高さ(height)を変更しています。

Callbacks

コールバック関数も用意されています。

X軸に-100px移動すると、不透明度が変わります。

Custom duration

アニメーションのスピードも遅くしたり早くしたり簡単に設定できます。

Easing

イージングにも対応しています。

Delay

アニメーション開始のタイミングもms単位で設定できます。

Alternate easing/duration syntax

easingとdurationを組み合わせることもできます。

Optional units

数値の単位(px, ms, degなど)はオプション扱いなので、記述しなくても動作します。

Relative units

「+=」「-=」などの演算子も利用できます。

$.fn.css

$.fn.cssにも対応しています。

Setting transform origins

$.fn.cssを使って元となるアニメーションを指定できます。

Chaining / effect queue

複数のアニメーションを順番に動作させることができます。

Transitioning from one style to another

.cssと.transitonをつなげて記述することもできます。

jQuery Transitの対応ブラウザ

対応ブラウザはスマートフォン用のMobile Safariを含み、下記の通りです。

• IE 10+
• Firefox 4+
• Safari 5+
• Chrome 10+
• Opera 11+
• Mobile Safari