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

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

サイトのキャプチャ

cssAnimate

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

サイトのキャプチャ

cssAnimate

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

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

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

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

cssAnimateの特徴

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

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

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など他のエフェクトも開発中、とのことです。

top of page

©2017 coliss