[JS]FlashもHTML5も無しで、美しいアニメーションを実装するスクリプト -jCSML

FlashもHTML5もSilverLight, SVGも使わずに、IE7+, iPhone, iPad, Androidで動作するアニメーションを作成できるjQueryのプラグインを紹介します。

サイトのキャプチャ

jCS Media Library

jCSMLの対応ブラウザ

jCSMLの対応環境は下記の通りです。
HTML5非対応のIE7でも、Flash非対応のiPhoneでも動作します。

  • IE7+
  • Firefox3.6+
  • Chrome
  • Safari
  • iPhone
  • iPad
  • Android

jCSMLのデモ

jCSMLの多彩で美しいデモをいくつか紹介します。
各デモはチュートリアルも兼ねており、コードも一緒に掲載されています。

デモのキャプチャ

デモ:Movement

各エレメントが異なる方向から異なるタイミングでスライドします。

デモのキャプチャ

デモ:Rotation

それぞれの歯車が異なるスピードで回転します。
光の美しいエフェクトにも注目です。

デモのキャプチャ

デモ:Callbacks

コールバックにも対応、このデモではクリックした箇所に光が移動します。

デモのキャプチャ

デモ:Easing

マンガのようなアニメーションもでき、ボールが弾んだ後、静止して表情を変えます。

デモのキャプチャ

デモ:Viewports

異なるスピード・角度で背景をスライドさせ、表示可能なエリアを定義できます。

デモのキャプチャ

デモ:Scaling

回転しながら滑らかなアニメーションで拡大します。

デモのキャプチャ

デモ:Opacity

アニメーションで不透明度をコントロールします。

デモのキャプチャ

デモ:Layering

複数のレイヤーを異なるスピードでスライドさせます。

デモのキャプチャ

デモ:Typography

アニメーションで文字を一つずつ表示します。

jCSMLのダウンロード

jCSMLは無料版と有料版があります。

  • jCSML
    無料版
    上記デモをはじめ、サイト上のチュートリアルやアニメーションが全て実装できます。
  • jCSML Elite
    有料版
    「jCSML」の全ての機能が利用できます。
  • jCSML Elite FX
    有料版
    「jCSML」の全ての機能が利用でき、すぐに利用できるパッケージ付き。

jCSMLは無料版をはじめ、下記ページからダウンロードできます。

top of page

©2017 coliss