[JS]FlashもHTML5も無しで、美しいアニメーションを実装するスクリプト -jCSML
Post on:2012年6月7日
FlashもHTML5もSilverLight, SVGも使わずに、IE7+, iPhone, iPad, Androidで動作するアニメーションを作成できるjQueryのプラグインを紹介します。
![サイトのキャプチャ](/wp-content/uploads-2012/2012060705.png)
[ad#ad-2]
jCSMLの対応ブラウザ
jCSMLの対応環境は下記の通りです。
HTML5非対応のIE7でも、Flash非対応のiPhoneでも動作します。
- IE7+
- Firefox3.6+
- Chrome
- Safari
- iPhone
- iPad
- Android
jCSMLのデモ
jCSMLの多彩で美しいデモをいくつか紹介します。
各デモはチュートリアルも兼ねており、コードも一緒に掲載されています。
![デモのキャプチャ](/wp-content/uploads-2012/2012060706-01.png)
各エレメントが異なる方向から異なるタイミングでスライドします。
![デモのキャプチャ](/wp-content/uploads-2012/2012060706-02.png)
それぞれの歯車が異なるスピードで回転します。
光の美しいエフェクトにも注目です。
![デモのキャプチャ](/wp-content/uploads-2012/2012060706-03.png)
コールバックにも対応、このデモではクリックした箇所に光が移動します。
![デモのキャプチャ](/wp-content/uploads-2012/2012060706-04.png)
マンガのようなアニメーションもでき、ボールが弾んだ後、静止して表情を変えます。
[ad#ad-2]
![デモのキャプチャ](/wp-content/uploads-2012/2012060706-05.png)
異なるスピード・角度で背景をスライドさせ、表示可能なエリアを定義できます。
![デモのキャプチャ](/wp-content/uploads-2012/2012060706-06.png)
回転しながら滑らかなアニメーションで拡大します。
![デモのキャプチャ](/wp-content/uploads-2012/2012060706-07.png)
アニメーションで不透明度をコントロールします。
![デモのキャプチャ](/wp-content/uploads-2012/2012060706-08.png)
複数のレイヤーを異なるスピードでスライドさせます。
![デモのキャプチャ](/wp-content/uploads-2012/2012060706-09.png)
アニメーションで文字を一つずつ表示します。
jCSMLのダウンロード
jCSMLは無料版と有料版があります。
-
- jCSML
- 無料版
- 上記デモをはじめ、サイト上のチュートリアルやアニメーションが全て実装できます。
-
- jCSML Elite
- 有料版
- 「jCSML」の全ての機能が利用できます。
-
- jCSML Elite FX
- 有料版
- 「jCSML」の全ての機能が利用でき、すぐに利用できるパッケージ付き。
jCSMLは無料版をはじめ、下記ページからダウンロードできます。
sponsors