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

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

デモのキャプチャ

Motio
Motio -GitHub

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

デモのキャプチャ

Examples 1

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

デモのキャプチャ

Examples 2

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

デモのキャプチャ

Examples 3

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

デモのキャプチャ

Examples 4

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

デモのキャプチャ

Examples 5

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

デモのキャプチャ

Mini Game

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

top of page

©2017 coliss