[JS]これは楽しい！FPS値の設定もできるスプライトベースのアニメーションを作成するスクリプト -Motio

Post on:2012年10月30日

sponsors

FPSとはFrames Per Secondの略で、1秒あたりのフレーム数のことです。
このFPS値やスピードを簡単に調整できるCSSスプライトベースのアニメーションを実装できるjQueryのプラグインを紹介します。

MotioはCSSスプライトで配置した画像をアニメーションでコントロールできます。デモページには楽しいアニメーションが多数あります。

雲が浮かぶ青空が水平方向にアニメーションします。スピードをマイナスにすると、逆方向にスクロールします。

キャラクターが歩くアニメーションです。FPS値を高くすると早歩きになります。

キャラクターがジャンプするアニメーションです。

炎が上下に移動するアニメーションです。

炎が上がり爆発し、煙になるアニメーションです。

最後はミニゲームです。
キーボードの矢印、スペース、「B」で操作ができます。