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

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

サイトのキャプチャ

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系ブラウザのみです。

デモのキャプチャ
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

top of page

©2017 coliss