[JS]CSS3アニメーションとjQueryの利点を組み合わせたスクリプト -cssAnimate

CSS3アニメーションとjQueryのいいとこ取りをした、ページにアニメーション機能を取り入れるjQueryのプラグインを紹介します。

cssAnimate

[ad#ad-2]

サイトでもスクリプトは使用されており、ダイナミックすぎるアニメーションでページが表示されます。

cssAnimate

jQueryのアニメーションの特徴

短いコードで簡単に記述することができますが、動作が遅い（特にモバイル機器で）。

CSS3のアニメーションの特徴

動作が高速で、柔軟に記述できますが、コードの量が多くなります。

cssAnimateの特徴

jQueryとCSS3の利点を組み合わせ、短いコードで高速に動作するアニメーションを利用できます。

• jQueryのアニメーションの構文を全てサポート。
• CSS3アニメーションの利用。
• ブラウザの互換性。
  CSS3非対応ブラウザにはjQueryでアニメーションを提供。
• コールバック関数。
• jQueryのfadeIn, fadeOutなどの使用。
• 全てのプロパティがアニメーション可。
  jQueryでサポートされていないtransform, shadow, border-radiusも可。
• jQueryのイージングのプラグインは使用しません。

[ad#ad-2]

cssAnimateのサンプルコード

コードの記述はjQueryと同じように記述できます。

jQueryの記述例

$("#id").animate({ opacity:0.7, left:200 }, 2000);

cssAnimateの記述例

$("#id").cssAnimate({ opacity:0.7, left:200 }, 2000);

cssAnimateの実装

cssAnimateでは現在、7つの関数が用意されています。

.cssAnimate(properties, [duration,] [easing,] [complete])

jQueryの.animate()と同じように利用できます。

.cssFadeTo(duration, opacity, [easing,] [callback])

.fadeToと同様です。

.cssFadeIn([duration,] [easing,] [callback])

.fadeInと同様です。

.cssFadeOut([duration,] [easing,] [callback])

.fadeOutと同様です。

.cssDelay(duration)

.delay()と同様です。

.cssStop()

.stop()と同様ですが、現在開発中です。

.css3D([enable/disable])

3番目の軸に沿って3Dにアニメーションします。

easing

イージングはcssAnimateでは少し異なります。

• swing: swing (default)
• linear: linear
• easeIn: easeInQuad
• easeOut: easeOutQuad
• easeInOut: easeInOutQuad

現在は5つ用意されており、bouncing, elasticなど他のエフェクトも開発中、とのことです。